如何在Bootstrap容器内部使div与左边距齐平

Question

我正在尝试使着色器一直向左（或向右）移动，具体取决于我的页面。问题在于使用容器。

我想要的：

HTML：

<div class="container">
  <div class="col-xs-5">  
    <div class="shader" style="margin-top: 500px;">
      <h3>Super cool title</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
</div>

以下CSS：

.shader {
  background-color: rgb(254, 254, 254);
  background-color: rgba(254, 254, 254, 0.85);
  padding: 15px;
  border-radius: 5px;
}

问题是，如果我把它放在容器内，它就不会偏向一边。如果我把它放在容器外面，它就不会在col阻塞之后停止。

我用流体容器试过这个，但它仍然不会一直到一边。我还需要做很多努力来正确地调整问题。

Answer 1

两个问题：

1. All col divs need to be in a row div。你错过了一个行div。

2. 两种类型的容器div都有15px的填充。如果您希望其中的内容与您需要的边缘齐平：

   • 从容器类中删除填充，以便容器中的所有内容都接触边缘或
   • 为着色器添加负边距，以便容器中的其他元素不会触及边缘。

以下示例假设您只希望着色器触摸边缘。我还添加了一个图像占位符作为背景，以便您可以看到着色器触及边缘。您只需要更改着色器类：

＆＃13;
＆＃13;
body {
	background: url(http://placehold.it/1000x1000);
    background-size: cover;
}

.shader {
  background-color: rgb(254, 254, 254);
  background-color: rgba(254, 254, 254, 0.85);
  padding: 15px;
  margin-left: -15px;
  border-radius: 5px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container-fluid">
 <div class="row">
 
  <div class="col-xs-5">  
    <div class="shader" style="margin-top: 500px;">
      <h3>Super cool title</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
  <div class="col-xs-7">
  
  </div>
 </div>
</div>
＆＃13;
＆＃13;
＆＃13;