带边距的 Bootstrap 3 按钮不再起作用

Question

The fiddle for demo

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

编辑：该按钮在屏幕被压缩时起作用，只是在桌面宽度时不起作用。

使用最新的 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-centered 课程非常有问题。

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

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

编辑：如下所述，只需删除类即可。