Bootstrap 3网格：响应位置绝对底宽问题

Question

我需要在使用Bootstrap网格的容器底部放置一个元素。

我遇到的问题是锚点跨越父宽度。我需要锚点跨越100％并保持在父div content-wrapper的宽度内。

我需要在来自父容器的按钮的每一侧保留15px填充。

以下是该问题的屏幕截图：

HTML：

<div class="content-wrapper col-xs-12">
  <div class="content">
    <a class="button" href="#">See more</a> 
  </div>
</div>

CSS：

.content-wrapper {
  width: 100%;
  height: 450px;
  background-color: gray;
  position: relative;
}

.button {
  display: block;
  background: black;
  width: 100%;
  text-align: center;
  height: 50px;
  padding-top: 13px;
  position: absolute;
  bottom: 0;
}

这是一个JSFIDDLE，可以看到问题的实际效果。

Answer 1

只需将left:0添加到.button班级

即可

.button {
  display: block;
  background: black;
  width: 100%;
  text-align: center;
  height: 50px;
  padding-top: 13px;
  position: absolute;
  bottom: 0;
  left: 0;
}

Answer 2

我在HTML结构中添加了row类和container-fluid类以及一些CSS更改。 类container-fluid未使用您的导入引导程序。所以我在HTML部分另外添加了它以供参考。

通过此更改，您可以使用默认引导程序结构，如上所述，使用15px间隙获得所需的结果。

以下是工作代码：

＆＃13;

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
/* @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); */

.content-wrapper {
  width: 100%;
  height: 450px;
  background-color: gray;  
}
.content {
    display: inline-block;
    width: 100%;
    position: relative;
    height: 100%;
}
.button {
  display: block;
  background: black;
  width: 100%;
  text-align: center;
  height: 50px;
  padding-top: 13px;
  position: absolute;
  bottom: 0;
  left: 0;
  
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">

<div class="content-wrapper col-xs-12">
  <div class="content">
    <a class="button" href="#">See more</a> 
  </div>
</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;