Bootstrap 3 Grid：响应位置绝对底部宽度问题答案

【问题标题】：Bootstrap 3 Grid: Responsive Position Absolute Bottom Width IssueBootstrap 3 Grid：响应位置绝对底部宽度问题
【发布时间】：2017-11-16 10:55:43
【问题描述】：

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

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

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

这是问题的截图：

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 以查看实际问题。

【问题讨论】：

Bootstrap 在两边添加 15px 的边距，尝试在 boostrap 之后加载自定义 css，使用 !important 还是将 margin 固定为 0

标签： html css twitter-bootstrap responsive

【解决方案1】：

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

通过此更改，您可以使用上面提到的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>

【讨论】：

【解决方案2】：

只需将 left:0 添加到您的 .button 类中

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

【讨论】：

这行得通 - 但是，我需要在每一侧保持 15px 的间隙？
只需将 margin: 0 15px 添加到 .button 的父 div 如果这不是您想要的，您可以在按钮上方创建另一个 div 并将其用作绝对按钮的相对位置。
这样的？我必须设置一个高度，以便元素知道在哪里显示到父 div 的底部：jsfiddle.net/DTcHh/39346
据我所知，您正在使用引导程序，因此如果您使用类容器制作 div，它将在左右两侧留有边距，然后只需将您的绝对 div 添加到该 div。
@Filth 我为你做了codepen codepen.io/anon/pen/qVPMeV这是你想要的吗？