Question

所以我使用Bootstrap 4 alpha 3.我正在使用容器进行我的应用程序。我想要做的是让我的帖子显示页面的底部部分具有不同的背景颜色，我希望该颜色扩展到整个页面的宽度。我似乎找不到打破容器的方法。我试图跟随一些与此类似的问题，但它们往往是从一段时间后回来的，解决方案似乎不适用于Bootstrap 4.这就是我现在正在尝试的问题

在我的帖子里面show.html.erb

<div class="inner-container">
 ........
</div>

这是我的post.scss

.inner-container {
 width: 100%;
 background: black;
 position: absolute;
}

我页面的主要背景是浅灰色。所以我只想在这个页面上打破容器，只为这个Div类。我希望文本和所有内容都保留在容器中，我只是想尝试获取背景颜色以扩展整个页面的宽度。

Answer 1

添加：

body {
  margin: 0 !important;
}

BS alpha.3和BS alpha.6都有body { margin: 0 }不确定为什么它不适合你。默认情况下，<body>会有margin: 8px，因此您需要覆盖它。

＆＃13;

.inner-container {
  width: 100%;
  height: 100%;
  background: black;
  position: absolute;
}


body {
  margin: 0;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="inner-container">
  ........
</div>

＆＃13;

Div类打破容器

1 个答案: