Knopf in voller Breite machen?

276

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

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

Wie mache ich die Schaltfläche so breit wie die Spalte?

css twitter-bootstrap html responsive-design user1438003
quelle
2
Welche Spalte? Wo ist das CSS?
JJJ
Also benutze ich Twitter-Bootstrap
user1438003
1
Hast du es versucht style="width:100%"? Oder das in eine deiner Klassen einordnen?
Lee Taylor
2
Das liegt vielleicht daran, dass es einen Rand hat oder die Spalte etwas aufgefüllt ist.
Ohad
4
Die btn-blockKlasse funktioniert für mich wie erwartet in BS3
fguillen

Antworten:

826

Bootstrap v3 & v4

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

Bootstrap v2

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

Layke
quelle
13
Für Schaltflächengruppen müssen Sie ebenfalls btn-blockzum btn-groupWrapper hinzufügen .
Jesse
1
getestet mit Bootstrap V3 und "BTN-Block" funktionierte für mich
Buddhika Alwis
Ich verwende das gleiche, aber erweitert nicht <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Suche </ button> </ div>
Samra
Prost Kumpel! Dies muss die Antwort sein
Nicholas
39

Warum nicht die vordefinierte Bootstrap-Klasse verwenden input-block-level, 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 ^ .

CodeAngry
quelle
2
@fguillen Ich benutze BS nicht mehr, aber versuche es mit form-controlKlasse. Es scheint die Dinge in den Proben 100% breit zu machen.
CodeAngry
@CodeAngry nur neugierig, warum benutzt du BS nicht mehr (außer möglichem Code-Ärger;)?
K. Kilian Lindberg
2
@ CarlLindberg Ich habe meine eigenen gerollt! BS gut für eine schnelle Abwicklung, aber ... es fällt nicht auf.
CodeAngry
1
@CodeAngry, das ist cool, du hast dein eigenes Framework gerollt - aber es kann sich lohnen, den Theme-Roller zu verwenden - so oder so, Requisiten für dein eigenes Ding!
Cody
Ab bs4 scheint die Antwort von @Layke aktueller zu sein und deckt bs 2, 3 und 4 ab. Keine der oben genannten Optionen hat mir bei bs4 etwas Nützliches gebracht. Entschuldigen Sie, dass Sie sich damit unterhalten, aber die akzeptierte Antwort scheint keine gute Idee zu sein, und diese scheint veraltet zu sein.
JL Peyret
26

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>
syn
quelle
1
Dies ist der Weg, um es mit btn-lg zu tun. Formularsteuerung funktioniert nicht.
Mark Swardstrom
14

Bootstrap 4.1+

Verwendung col-12, btn-block, w-100oderform-control

<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">
             class="col-12"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
     </div>
</div>
Erweitern Sie das Snippet

WasiF
quelle
12

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

Noel
quelle
1
Die Frage war über Schaltflächen nicht btn-groups, es gibt eine akzeptiertere Antwort, die sich auf die btn-blockKlasse von Layke bezieht.
Hans
9

Sie sollten diese Stile einem CSS-Blatt hinzufügen

div .no-padding {
  padding:0;
}

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

Ändern Sie dann die Klassen zu Ihrem Code hinzufügen

<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 dies nicht getestet und bin mir nicht 100% sicher, was Sie wollen, aber ich denke, das wird Sie näher bringen.

Kenny Bania
quelle
Ich habe einen Tippfehler in meinem Code korrigiert, sollte im oberen CSS-Eintrag div statt span sein. Können Sie bestätigen, dass die Stile angewendet werden? Ändert sich die Breite der Schaltfläche überhaupt?
Kenny Bania
6
btn-blockist das Attribut, das mich gerettet hat! Ich habe mir die Haare ausgezogen. Jetzt gehe ich zurück und suche twitter.github.io/bootstrap/base-css.html#buttons , dieses Attribut wurde dort dokumentiert - doh;)
GONeale
6

Ich hätte gedacht, dass dies die Bootstrap-artigste Art ist, Dinge zu tun:

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

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

Starkers
quelle
5 
<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, btn-largedie Breite von überschrieb btn-block.

kim3er
quelle
1

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 im CSS verwenden, oder wenn Sie als Antwort einen Prozentwert verwenden möchten.

skoepp
quelle