按钮组中的bootstrap 3垂直线

Question

按钮组

<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>

如何使用bootstrap 3创建垂直分隔符？

http://jsfiddle.net/gJH6w/

Answer 1

这是一个.btn-separator课程，以满足您的需求：

<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 2

我的结果

<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 3

如果你把其他按钮放在btn工具栏上的自己的组中，那么这个效果很好

$aPurchaseArray = array("Lamborghini" => 5, "Ferrari" => 4, "Bugatti" => 3, "McLaren" => 2, "Fiat" => 1", "Mazda" => 2");

$aSalesArray = array("Lamborghini" => 1, "Ferrari" => 2, "Bugatti" => 3);

// foreach sales item, using the key as the name and value as quantity sold
foreach($aSalesArray as $sProductName => $iQuantitySold){

    // if the product name exists in the target reduce its quantity
    if(isset($aPurchaseArray[$sProductName])){
        $aPurchaseArray[$sProductName] - $iQuantitySold;
    }

}