为什么我的 Bootstrap 边距大小不同？答案

【问题标题】：Why are my Bootstrap margins different sizes?为什么我的 Bootstrap 边距大小不同？
【发布时间】：2017-03-16 19:11:39
【问题描述】：

谁能解释一下为什么我的左边距和右边距不一样？

<div class="container-fluid">
    <div class="row">

            <div class="col-sm-4 col-md-4 col-lg-4">
                <button class="tab-button tab-yellow">One</button>
            </div>

            <div class="col-sm-4 col-md-4 col-lg-4">
                <button class="tab-button tab-green">Two</button>
            </div>

            <div class="col-sm-4 col-md-4 col-lg-4">
                <button class="tab-button tab-blue">Three</button>
            </div>
    </div>
</div>

https://jsfiddle.net/phpMick/e51t1fs8/

谢谢，

米克

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

发生的情况是您在 25px 按钮上的自定义左边距，将按钮“推得太远”到 Bootstrap 列之外。最好使用这样的边距..

margin: 10px auto;

http://www.codeply.com/go/DvflVK1ypd

【讨论】：

是的，我认为这是正确的。我接受的答案也将这些边距从按钮中删除。谢谢。

【解决方案2】：

您必须在按钮内封装div 并使用margin。如果从外部执行此操作，则会移动col- * 的轮廓。最好在这些元素中将它们放在 <div> 中并为类找借口

示例

HTML

 <div class="col-sm-4 col-md-4 col-lg-4">
     <div class="margin">
         <button class="tab-button tab-yellow">One</button>
     </div>
 </div>

CSS

.tab-button {

    border: none;
    color: #080906;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-size: 32px;
    border-radius: 8px;

    width: 100%;
    height: 100px;

    cursor: pointer;
}

.margin{
      margin: 10px 25px;
}

jsfiddle

【讨论】：

谢谢，这行得通。还在平板电脑上进行了测试，这正是我需要的地方。