水平空间Bootstrap按钮的最佳方法是什么?
按钮触摸时:
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<i class="icon-in-button"></i>
Add to list
<span class="caret"/>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">here</a>
</li>
<li>
<a href="#">new</a>
</li>
</ul>
<button class="btn btn-info">
<i class="icon-in-button"></i>
more
</button>
</div>
jsfiddle显示问题:http://jsfiddle.net/hhimanshu/sYLRq/4/
把它们放在btn-toolbar
或其他容器内,而不是btn-group
。 btn-group
将他们联合起来。有关Bootstrap documentation的更多信息。
编辑:原始问题是Bootstrap 2.x,但同样对Bootstrap 3和Bootstrap 4仍然有效。
在Bootstrap 4中,您需要使用实用程序类(例如mx-2)为您的组添加适当的边距。
如果使用Bootstrap,你可以改变样式:如果你只想在一个页面中,那么在head标签之间添加.btn-group btn {margin-right:1rem;}
如果是为所有网站添加到css文件
我最终做了类似于mark dibe所做的事情,但我需要以稍微不同的方式找出间距。
引导程序中的col-x
类可以是绝对的救星。我最终做了类似的事情:
<div class="row col-12">
<div class="col-3">Title</div>
</div>
<div class="row col-12">
<div class="col-3">Bootstrap Switch</div>
<div>
这使我能够以很好的间隔方式对齐标题和输入开关。同样的想法可以应用于按钮,并允许您停止按钮触摸。
(旁注:我希望这是对上述链接的评论,但我的声誉不够高)
只需将按钮放在一个类(class =“btn-toolbar”)中,就像兄弟Miroslav Popovic所说的那样。它很棒。
<div class="btn-toolbar">
<button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
<button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>
你可以使用spacing for Bootstrap而不需要任何额外的CSS。只需将类添加到按钮即可。这适用于版本4。
你应该使用bootstrap v.4
<div class="form-group row">
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn1">
</div>
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn2">
</div>
</div>
大多数情况下最简单的方法是保证金。
你可以做的地方:
button{
margin: 13px 12px 12px 10px;
}
要么
button{
margin: 13px;
}
我使用了Bootstrap 4按钮插件(https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin),并将类圆形添加到标签,将类mx-1添加到中间按钮,以实现单独的单选按钮所需的外观。使用类btn工具栏使我出现单选按钮圆圈,这不是我想要的。希望这有助于某人。
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active rounded">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary rounded mx-1">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary rounded">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
另一种实现此目的的方法是在按钮中添加类.btn-space
<button type="button" class="btn btn-outline-danger btn-space"
</button>
<button type="button" class="btn btn-outline-primary btn-space"
</button>
并按如下方式定义此类
.btn-space {
margin-right: 15px;
}
Dragan B建议的是Bootstrap 4的正确方法。我在下面举了一个例子。例如mr-3是保证金权利:1rem!important
<div class="btn-toolbar pull-right">
<button type="button" class="btn mr-3">btn1</button>
<button type="button" class="btn mr-3">btn2</button>
<button type="button" class="btn">btn3</button>
</div>
p.s:在我的情况下,我希望我的按钮显示在屏幕右侧,因此向右拉。
我实际上遇到了同样的要求。我只是像这样使用CSS覆盖
.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }