html - bootstrap 设置 margin left 等于 .container

Question

我对 Bootstrap 有疑问。我想设置两个元素 - 一个内容居中(我们将其命名为 .top)，另一个元素同样位于 .top 的左侧和右侧它将固定在浏览器的右侧(我们将其命名为 .btm)。 我知道当我添加 .container 类时，它会将我的 .top 元素居中(通过添加 margin-left: auto 和 margin-right: auto)，但是如何让 .btm 元素与左侧的 .top 元素处于同一级别？当我设置一些 margin-left 时，我会在第一次更改浏览器宽度时失去它的值(value)。我怎样才能做到这一点？ 目前我有这样的东西:

HTML:

<div class="container">
  <div class="row">
    <div class="top">
      <strong>top text</strong>, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
    </div>
  </div>a
</div>


<div class="row"> 
  <div class="btm"> <!-- i want to make this equal on the left side as the ".top" element-->
    <strong>bottom text</strong>, , lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
  </div>
</div>

CSS:

body {
  background-color: #cfcfcf;
}
.top{
    height: 100px;
}
.btm{
  margin-left: 10%;
  background: #008B4F;
}

这是代码笔: http://codepen.io/anon/pen/YGdmQG

Answer 1

你应该关闭 <div class="container"> 最后到了 .btm 部分。

您所做的是在“.top”部分之后立即关闭 div。

并在您的 .btm CSS 中删除 margin-left:10%。

您的 HTML 应该是:-

     <div class="container">
        <div class="row">
          <div class="top">
            <strong>top text</strong>, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, 
          </div>
        </div>

        <div class="row"> 
          <div class="btm"> <!-- i want to make this equal on the left side as the ".top" element-->
           <strong>bottom text</strong> lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsumipsum
          </div>
        </div>
   </div>

CSS:-

.btm{
  background: #008B4F;
}