Einstellung Bootstrap-Tasten, um die gleiche Breite

Ich habe ein bootstrap sidebar enthält ein paar Tasten. Leider, es sieht sehr hässlich aus und ich möchte jede Taste die gleiche Größe.
Diese Schaltflächen enthalten sind, die in einer Seitenleiste und wird stack vertikal. Ich möchte vermeiden, eine pixel-Anzahl für jede Taste.
Hier ist die jfiddle

https://jsfiddle.net/66bk2rfc/

HTML

<div id="reading-sidebar" class="col-xs-3 panel-default">
  <div id="reading-sidebar-title" class="panel-heading">Options
    <button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
      <div id="reading-sidebar-contents" class="panel-body">
        <ul class="sidebar-button-list">
          <button type="button" id="pre-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Pre Readings</button><br>
          <button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Passage</button><br>
          <button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Post Readings</button><br>
          <button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Media</button><br>
          <button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Questions</button>
        </ul>
      </div>
    </div>

InformationsquelleAutor RYDiiN | 2015-07-31

23

Den "bootstrap" Weg, dies zu tun wäre, um btn-block auf Ihrem button-Elemente. Etwa so:
```
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>
```
InformationsquelleAutor joshb

Können Sie auch umgeben Sie Sie mit <div class="btn-group-lg btn-group-vertical">

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="reading-container" class="col-xs-6">
  <div id="reading-sidebar" class="col-xs-3 panel-default"></div>
  <div id="reading-sidebar-contents" class="panel-body">
    <div class="btn-group-lg btn-group-vertical">
      <button type="button" id="pre-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Pre Readings</button>
      <button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Passage</button>
      <button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Post Readings</button>
      <button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Media</button>
      <button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Questions</button>
    </div>
  </div>
</div>

InformationsquelleAutor vanburen

1

Wenn ich Ihre Frage richtig. Meinst du diese:
```
#reading-sidebar-contents .btn{
    width:200px;
}
```
Hier ist fiddle: https://jsfiddle.net/66bk2rfc/6/

InformationsquelleAutor Akul Von Itram
0

Änderte ich Ihre Geige auf eine Lösung. Sie können Ihre sidebar eine Breite von 100%. Dann können Sie nur Ihre Knöpfe 80% mit einer Zeile css und machen Ihnen den Aufenthalt in der Mitte mit margin:0 auto. Wenn Sie möchten, passen Sie Ihre Größe der Tasten, können Sie leicht ändern Sie es mit nur einer Zeile. Man könnte auch hinzufügen, die text-align:left, setzen Sie font-Größe für alle Tasten,... für besseres styling der buttons.
```
 #reading-sidebar
{
    width:80%;
   margin:0 auto;
}

 #reading-sidebar-contents button
{
  width:100%;
   margin:0 auto;
} 
```
Link: https://jsfiddle.net/66bk2rfc/1/

InformationsquelleAutor Jan_dh
0

Ich suggess Sie es zu tun mögen dieses:
```
.btn {
    width: 100%;
    height: 56px;
    padding-left: 2% !important;
}
.btn i {
    left: 10px;
    width: 10%;
    top: 25%;
    height: 50%;
}
.btn.pull-left {
    text-align: left;
}
```
Auch, wenn Sie nur wollen nur diese Einfluss auf die sidebar-Schaltflächen, hinzufügen

#Lesen-sidebar .btn { } ETC...

Wenn Sie es wollen, nicht 100% Breite und zentriert ist, sollten Sie es so machen,
```
.btn { width: 80%; margin-left: 10%; }
```
Machen, dass es zentriert einfach. 🙂

InformationsquelleAutor EspeH

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.