Bootstrap-3 vertikale Linie in Knopfgruppe

Question

Button-Gruppe

<button type="button" class="btn btn-default pull-left"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    <span id="prevBtn">06.02.2014</span> 
</button> 

<button type="button" class="btn btn-default pull-left"> 
    <span id="nextBtn">08.08.2014</span> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
</button> 

<button type="button" class="btn btn-default pull-left"> 
    <span id="toDayBtn">Today</span> 
</button> 

Wie mit Bootstrap-3 vertikale Divider erstellen?

http://jsfiddle.net/gJH6w/

Answer 1

Mein Ergebnis

<div style="border-right: 1px solid #C0C0C0; margin-left: 20px; float: left; height: 34px"> 
</div> 
    <button type="button" class="btn btn-default pull-left" style="margin-left: 20px;"> 
    <span id="toDayBtn">Today</span> 
</button> 

Answer 2

Hier ist eine .btn-separator Klasse an Ihre Bedürfnisse anzupassen:

<div class="container"> 
    <div class="row"> 
     <button type="button" class="btn btn-default pull-left"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span id="prevBtn">06.02.2014</span> 
     </button> 

     <button type="button" class="btn btn-default pull-left"> 
      <span id="nextBtn">08.08.2014</span> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </button> 

     <span class="btn-separator"></span> 

     <button type="button" class="btn btn-default pull-left"> 
      <span id="toDayBtn">Today</span> 
     </button> 
    </div> 
</div> 

.btn-separator:after { 
    content: ' '; 
    display: block; 
    float: left; 
    background: #ADADAD; 
    margin: 0 10px; 
    height: 34px; 
    width: 1px; 
} 

JSFiddle

Answer 3

Wenn Sie Ihre andere Tasten in ihrer eigenen Gruppe auf einer BTN-Symbolleiste setzen, dann funktioniert das recht gut

<div class="btn-group" role="group">|</div>