Question

我想要一个提交和取消按钮彼此相邻，可能介于两个像素之间。我写了这个，你可以在实时代码中看到：

http://www.bootply.com/Y3t35NGADa

但两个按钮之间的距离很大！我希望他们彼此更接近。我确实尝试在提交按钮上设置padding-right或margin-right，但没有做任何事情！

Answer 1

这是因为你给了col-xs-4这就是为什么两个按钮占用4个列空间的原因。

选项1： 这是你的答案

            <div class="col-xs-1">
                <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
            </div>

            <div class="col-xs-1">
                <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
            </div>

        </div>

选项2：将两个按钮放在一起

<div class="row">

                <div class="col-xs-4">
                    <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
                  <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
                </div>
            </div>

Answer 2

您不必将它们放在单独的列中，只需将它们彼此相邻：

            <div class="row">

            <div class="col-xs-4">
                <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
              <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
            </div>


        </div>

Answer 3

您可以使用bootstrap class button-group执行此操作。

<div class="button-group ">                
                 <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>               
                <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>           
 </div>

Answer 4

如果你想让两个按钮尽可能彼此相邻，我可以使用http://www.bootply.com/oX77TSFRY5：

<style>
  .clear {
    clear: both;    
  }
</style>

<div class="row">
  <div class="col-xs-4">
    <button value="cancel" class="btn btn-default pull-left">Cancel</button> 
    <button value="register" class="btn btn-primary pull-left">Submit</button>
    <div class="clear"></div>
 </div>
</div>

如果您希望在问题中提及的距离为5px，请删除pull-left类。

两个Bootstrap按钮并排

4 个答案: