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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23730748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:49:30  来源:igfitidea点击:

horizontal divider between button group in Twitter Bootstrap 3

htmlcsstwitter-bootstraptwitter-bootstrap-3

提问by user2978381

I am trying to put some text between a radio button group....I have tried both

我正在尝试在单选按钮组之间放置一些文本......我都试过了

<hr>

and

<br>

tag. But it doesn't work... The text always sticks to the button group..This is my code

标签。但它不起作用......文本总是粘在按钮组上......这是我的代码

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

My intention is to create some gap or using a divider between group choice.

我的目的是在组选择之间创造一些差距或使用分隔线。

采纳答案by paulalexandru

Try thiss:

试试这个:

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

回答by Marcel Kohls

Try to use:

尝试使用:

<hr class="separator">

This is what is on bootstrap docs.

这是 bootstrap 文档中的内容。

回答by aosphyma

you can also use

你也可以使用

<hr class="featurette-divider">

回答by Medet Tleukabiluly

Problem is not clear, would be better if you had jsfiddle or screenshot, you should use form control, or at least list control to order elements as you want

问题不清楚,如果你有jsfiddle或截图会更好,你应该使用表单控件,或者至少列表控件根据需要对元素进行排序

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

Here is http://jsfiddle.net/52VtD/5658/maybe helps.

这是http://jsfiddle.net/52VtD/5658/可能有帮助。

回答by Tommy L

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