Question

我的Bootstrap有问题。我想设置两个元素 - 一个内容集中在一起（让我们将其命名为.top），另一个元素在左侧同等地.top，在右侧它将坚持浏览器的右侧（让我们将其命名为.btm）。我知道当我添加.container课程时，它会将我的.top元素（通过添加margin-left: auto和margin-right: auto）中心，但如何制作.btm元素与左侧的.top元素处于同一级别？当我设置一些margin-left时，我会在首先改变浏览器的宽度时失去它的价值。我怎样才能实现这一目标？目前我有这样的事情：

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

这是codepen： http://codepen.io/anon/pen/YGdmQG

Answer 1

您应该在.btm部分之后最后关闭 <div class="container"> 。

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

并删除保证金左边：.btm css上的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;
}

Answer 2

在这里，你去找我的朋友

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

<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>
</div>


<div class="row"> 
  <div class="btm">
    <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>

Answer 3

从btm类中删除保证金

   .btm{
      background: #008B4F;
    }

bootstrap set margin left等于.container

3 个答案: