Question

我是bootstrap的新手，我有一个问题。

<div class="container">
   <div class="col-md-4 col-sm-6 col-xs-6">
     <a href="">
       <div class="box">
         aaa
       </div>
       <div class="hover">
         <div class="text">bbb</div>
       </div>
     </a>
  </div>
   <div class="col-md-4 col-sm-6 col-xs-6">
     <a href="">
       <div class="box">
         aaa
       </div>
       <div class="hover">
         <div class="text">bbb</div>
       </div>
     </a>
  </div>
   <div class="col-md-4 col-sm-6 col-xs-6">
     <a href="">
       <div class="box">
         aaa
       </div>
       <div class="hover">
         <div class="text">bbb</div>
       </div>
     </a>
  </div>
   <div class="col-md-4 col-sm-6 col-xs-6">
     <a href="">
       <div class="box">
         aaa
       </div>
       <div class="hover">
         <div class="text">bbb</div>
       </div>
     </a>
  </div>
</div>

.box {
  background-color: red;
  height: 60px;
}
.hover {
    position: absolute;
    top: 0;
    background: none repeat scroll 0% 0% rgba(20, 245, 43, 0.5);
    width: 100%;
}

FIDDLE：https://jsfiddle.net/ocqpsvvc

为什么我对div.hover使用“width：100％”，那么background是否在tag a之外？ div.box的背景是好的。

我不想使用像素宽度或修改％，因为我会修改所有响应式布局。

Answer 1

你的问题在于引导程序＆＃34; col＆＃34;元素。默认情况下，它们上面有填充，您需要删除填充。 E.G。

<div class="col-md-4 col-sm-6 col-xs-6" style="padding:0;">

编辑：或者在元素中添加另一个类，以便css可以删除更干净的填充。 E.G。

<div class="col-md-4 col-sm-6 col-xs-6 removePad">
.removePad{padding:0;}

Answer 2

您没有考虑15px bootstrap默认填充。

添加width: calc(100% - 30px);以弥补填充。 calc说，对于15px右边和15px左边，宽度为100％减去30px。这将解决您的问题。

请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/ocqpsvvc/5/

引导程序中的悬停框 - 宽度

2 个答案: