it-swarm.com.de

Schaltfläche in voller Breite aktivieren?

Ich möchte, dass ein Knopf die gesamte Breite der Spalte einnimmt, habe aber Probleme ...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

Wie mache ich den Button so breit wie die Spalte?

260
user1438003

Bootstrap v3 & v4

Verwenden Sie die Klasse btn-block für Ihre Schaltfläche/Ihr Element

Bootstrap v2

Verwenden Sie die Klasse input-block-level für Ihre Schaltfläche/Ihr Element

793
Layke

Warum nicht die Bootstrap vordefinierte Klasse input-block-level verwenden, die den Job erledigt?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

Weitere Informationen finden Sie hier im Abschnitt Control Sizing ^ .

39
CodeAngry

Ich habe das einfach benutzt:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
23
syn

verwenden

<div class="btn-group btn-group-justified">
  ...
</div>

es funktioniert jedoch nur für <a> -Elemente und nicht für <button> -Elemente.

siehe: http://getbootstrap.com/components/#btn-groups-justified

12
noel

Bootstrap 4.1.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             Full Width Button
         </button>
     </div>
</div>
9
WasiF

Sie sollten diese Stile einem CSS-Arbeitsblatt hinzufügen

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

Dann ändere und füge die Klassen zu deinem Code hinzu

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

Ich habe das noch nicht getestet und bin mir nicht 100% sicher, was Sie wollen, aber ich denke, das wird Sie näher bringen.

8
Kenny Bania

Ich hätte gedacht, dass dies die bootstrap-artigste Art wäre, Dinge zu tun:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

Ich füge der Schaltfläche nur die Klasse col-xs-12 hinzu.

6
Starkers
<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

In Bootstrap 3 sollte dies alles sein, was Sie brauchen. Ich glaube, dass btn-large die Breite von btn-block überschrieb.

5
kim3er

Die Breite der Schaltfläche wird durch den Schaltflächentext definiert. Wenn Sie also die Breite der Schaltfläche definieren möchten, können Sie eine definierte Breite verwenden, indem Sie Pixel in der CSS verwenden, oder indem Sie einen Prozentwert als Reaktion verwenden möchten.

1
skoepp