按钮组中的引导程序 3 垂直线答案

【问题标题】：bootstrap 3 vertical line in button group按钮组中的引导程序 3 垂直线
【发布时间】：2014-03-08 23:47:49
【问题描述】：

按钮组

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

【问题讨论】：

我认为代码已经足够清晰了......即使它更好，也不需要小提琴。
您可以使用此答案，并根据需要将列转换为按钮：stackoverflow.com/a/14580505/2454790

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我的结果

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

【讨论】：

【解决方案2】：

这是满足您需求的.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

【讨论】：

【解决方案3】：

如果您将其他按钮放在 btn 工具栏上自己的组中，那么效果会很好

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

【讨论】：