Bootstrap 3 带边距的按钮不再有效

Question

无法弄清楚为什么当我在顶部和左侧添加边距时此按钮不滚动或不可点击。如果我在 css 的第 47 行取出 class，它会按需要工作，但试图将它与另一列中的文本对齐，但它会停止工作。

编辑：该按钮在屏幕被压缩时有效，但在桌面宽度时无效。

使用最新的 Bootstrap, jQuery.

有什么想法吗？

CSS

@charset "UTF-8";
/* CSS Document */
body { font-family: 'Quicksand', sans-serif; }
  a:link { text-decoration:none; color:rgba(0,0,0,1.00); }
  a:visited { text-decoration:none; color:rgba(0,0,0,1.00); }
  a:hover { text-decoration:none; color:rgba(0,0,0,1.00); }
  a:active { text-decoration:none; color:rgba(0,0,0,1.00); }

  .buttonsSub { font-size:20px; text-align:center; padding:5px; }
  h1 { font-family: 'Josefin Sans', sans-serif; font-weight:400; }

  .col-centered{
    float: none;
    margin: 0 3%;
    padding-left:-20px;
}

  .subTitle {font-size:30px; font-weight:400; }

  .border {
  display: inline-block;
  position: relative;
}
.border::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 0 rgba(255,255,255,.5);
  transition: box-shadow .1s ease;
}
.border:hover::after {
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.5);
}
img {
  display: block;
  position: relative;
}
.containerText {
    display: flex;
    align-items: center;
    justify-content: center;
}

#moveDown {margin-top: 20px;}

HTML

<div class="container">

    <div class="row clearfix text-center">
        <div class="col-md-2">
        <div id="moveDown"><a href="#" class="btn btn-default" style="width:60px; ">Back</a></div>

        </div>
        <div class="col-md-10 column col-centered">

        <h1 class="begining">title text</h1>

        </div>
        <div class="col-md-2">
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-12 column text-center">
            <br><span class=" subTitle">Page Title</span>
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-2">
        </div>
        <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:right">
        set one<br>
        <div class="border">
  <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" alt="">
</div>
        </div>

        <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:left">
        set two<br>
        <div class="border">
  <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" class="img-responsive" alt=""/>
</div>
        </div>
        <div class="col-md-2">
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-2">
        </div>
        <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:right">
        set three<br>
        <div class="border">
  <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" class="img-responsive" alt="">
</div>
        </div>

        <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:left">
        set four<br>
        <div class="border">
  <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" class="img-responsive" alt="">
</div>
        </div>
        <div class="col-md-2">
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-2">
        </div>
        <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:right">
        set five<br>
        <div class="border">
  <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" class="img-responsive" alt="">
</div>
        </div>

        <div class="col-md-4 column text-centered" style="margin-top:30px; text-align:left">

        </div>
        <div class="col-md-2">
        </div>
    </div>

<!-- End Content -->    
</div>

Answer 1

你的col-centeredclass问题很大。

.col-centered{
   float: none;
   margin: 0 3%;
   padding-left:-20px;
 }

您不能将 float:none 与 Bootstrap 中的列放在同一 div 上，因为它会破坏列对齐。此外，您不能在具有任何 col-*-* 的同一 div 上留出边距，否则它会破坏 Bootstrap 12 列网格系统。如果您需要边距，请在 div 列内添加另一个 div。最后，据我所知，您不能在任何元素中使用负填充，因此属性值无效。

编辑： 如下所述，只需删除 class.

Bootstrap 3 带边距的按钮不再有效

Bootstrap 3 Button with Margin no longer working

jquery

css

twitter-bootstrap

button

margin