html - Bootstrap 3 网格 : Responsive Position Absolute Bottom Width Issue

Question

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

我遇到的问题是 anchor 超出父宽度。我需要 anchor 跨越 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

我已经在您的 HTML 结构上添加了 row 类和 container-fluid 类，并进行了一些 CSS 更改。container-fluid 类不适用于您的导入 Bootstrap 。所以我在 HTML 部分额外添加了它以供您引用。

通过此更改，您可以使用默认 Bootstrap 结构以 15px 间隙实现所需的结果。

这是工作代码:

/* 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;
  
}

<!-- 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>