Twitter Bootstrap 3中按钮组之间的水平分隔线

Question

我正在尝试将一些文本放置在单选按钮组中....我尝试过两种方法：

<hr>

并且。

<br>

这是一个关于HTML代码中按钮组和标签之间无法实现分离的问题。我尝试使用CSS来调整标签的位置，但是它不起作用...文本始终固定在按钮组上。以下是我的代码：

<div class="btn-group btn-group-sm" data-toggle="buttons">

          <label class="btn btn-default">
    <input type="radio" name="options" id="option1"> <span class="glyphicon glyphicon-music"> MP3</span></label>
         <label class="btn btn-default">
    <input type="radio" name="options" id="option2"> <span class="glyphicon glyphicon-music"> WAV</span></label>

<hr>
<p>Use conversion tools</p>

<label class="btn btn-default">
    <input type="radio" name="options" id="option3"> <span class="glyphicon glyphicon-film"> MKV</span></label>
        <label class="btn btn-default">
    <input type="radio" name="options" id="option4"> <span class="glyphicon glyphicon-film"> FLV</span></label>
 </div>  

我的意图是在组选项之间创建一些间隙或使用分隔符。

- user2978381

---

尝试在<hr>之前添加<br>，看看有什么不同。 - Patrik Krehák

它不起作用...虽然我已经找到了解决方案...无论如何还是谢谢。 - user2978381

Answer 1

尝试使用：

<hr class="separator">

这是Bootstrap文档中的内容。

- Marcel Kohls

Answer 2

您还可以使用

<hr class="featurette-divider">

- aosphyma

Answer 3

试试这个：

<div class="clearfix"></div>
<br><br>

- paulalexandru

Answer 4

问题不够清晰，如果您有jsfiddle或屏幕截图会更好， 您应该使用表单控件，或至少使用列表控件来按照您想要的顺序排列元素。

<div class="list-group">
    <div class="list-group-item"></div>
</div>

这里是http://jsfiddle.net/52VtD/5658/，或许可以帮到你。

- Medet Tleukabiluly

---

尽管你的回答实现了我的意图...但单选按钮选项无法工作...感谢你的努力。 - user2978381

Answer 5

<!-- HR -->
<div class='col-sm-12 pb-3'>
    <hr>
</div>

- Tommy L