Question

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

Answer 1

将它们放在btn-toolbar或其他容器中，而不是btn-group。 btn-group将他们加在一起。有关Bootstrap documentation的更多信息。

编辑：原始问题是针对Bootstrap 2.x，但同样对Bootstrap 3和Bootstrap 4仍然有效。

在Bootstrap 4中，您需要使用实用程序类（例如mx-2）为您的组添加适当的边距。

Answer 2

只需将按钮放在一个班级（class =＆＃34; btn-toolbar＆＃34;）中，就像经纪人Miroslav Popovic所说的那样。它很棒。

＆＃13;

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

＆＃13;

Answer 3

您可以使用spacing for Bootstrap，无需任何其他CSS。只需将类添加到按钮即可。这适用于版本4.

Answer 4

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

你可以做的地方：

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

OR

button{
  margin: 13px;
}

Answer 5

你应该使用bootstrap v.4

public void onBindViewHolder(CategoryViewHolder.ViewHolder holder, int 
 position) {
    CategoryModel category = categories.get(position);
    String categories = "";


    holder.textView.setText(category.getCategoryName());
    //convert the image string int bytes like this
    byte[] decodedString = Base64.decode(category.getImage(), Base64.DEFAULT);
    Bitmap imgBitMap = BitmapFactory.decodeByteArray(decodedString, 0, decodedString.length); 

    holder.imageView.setImageBitmap(imgBitMap);

}

Answer 6

我使用了Bootstrap 4按钮插件（https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin）并将类四舍五入添加到标签，将类 mx-1 添加到中间按钮，以实现单独的单选按钮所需的外观。使用类 btn-toolbar 使得单选按钮圆圈显示给我，这不是我想要的。希望这有助于某人。

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

Answer 7

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

Answer 8

德拉甘B提出的建议是采用Bootstrap 4的正确方法。下面我举一个例子。例如mr-3是margin-right：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：对于我来说，我希望按钮显示在屏幕右侧，因此向右拉。

Answer 9

Dragan B.解决方案是正确的。就我而言，我需要在堆叠时垂直放置按钮，因此我向它们添加了mb-2属性。

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

Answer 10

这是基于 documentation 的另一种方法。

 <div class="d-grid gap-2 d-md-flex" >
    <button type="button" class="btn btn-outline-primary btn-sm">button1</button>
    <button type="button" class="btn btn-outline-primary btn-sm">button2</button>
 </div>

Answer 11

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

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

Answer 12

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

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

Answer 13

我最终做了与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>

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

（旁注：我希望这是对上面链接的评论，但是我的声誉不够高）

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

13 个答案: