如何在同一个div中的两个按钮之间留出空间?

问题描述 投票:136回答:10

水平空间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>

Two Bootstrap buttons

jsfiddle显示问题:http://jsfiddle.net/hhimanshu/sYLRq/4/

html css twitter-bootstrap
10个回答
301
投票

把它们放在btn-toolbar或其他容器内,而不是btn-groupbtn-group将他们联合起来。有关Bootstrap documentation的更多信息。

编辑:原始问题是Bootstrap 2.x,但同样对Bootstrap 3Bootstrap 4仍然有效。

Bootstrap 4中,您需要使用实用程序类(例如mx-2)为您的组添加适当的边距。


0
投票

如果使用Bootstrap,你可以改变样式:如果你只想在一个页面中,那么在head标签之间添加.btn-group btn {margin-right:1rem;}

如果是为所有网站添加到css文件


0
投票

我最终做了类似于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>

这使我能够以很好的间隔方式对齐标题和输入开关。同样的想法可以应用于按钮,并允许您停止按钮触摸。

(旁注:我希望这是对上述链接的评论,但我的声誉不够高)


68
投票

只需将按钮放在一个类(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>

9
投票

你可以使用spacing for Bootstrap而不需要任何额外的CSS。只需将类添加到按钮即可。这适用于版本4。


6
投票

你应该使用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>

5
投票

大多数情况下最简单的方法是保证金。

你可以做的地方:

button{
  margin: 13px 12px 12px 10px;
}

要么

button{
  margin: 13px;
}

2
投票

我使用了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>

2
投票

另一种实现此目的的方法是在按钮中添加类.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;
}

1
投票

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:在我的情况下,我希望我的按钮显示在屏幕右侧,因此向右拉。


0
投票

我实际上遇到了同样的要求。我只是像这样使用CSS覆盖

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
© www.soinside.com 2019 - 2024. All rights reserved.