引导程序设置的余量等于.container

Question

i have a problem with Bootstrap. I want to set two elements - one with content which is centered (lets name it .top ) and another which will be equally on the left side to .top and on the right side it'll stick to the right side of the browser (lets name it .btm ). I know that when i'll add .container class it will center my .top element (by adding margin-left: auto and margin-right: auto ), but how to make the .btm element to be on the same level as .top element on the left side? When i'll set some margin-left i'll lose the value of it in first changing the width of browser. How can i achieve this? Currently i have something like this:

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

Here's the codepen: http://codepen.io/anon/pen/YGdmQG

Answer 1

You Should Close <div class="container"> at last after to the .btm section.

What you did is you have closed the div immediatly after the ".top" section.

And remove margin-left:10% on your .btm css.

Your HTML Should Be:-

     <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

Here you go my friend

 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

Remove margin left from btm class

   .btm{
      background: #008B4F;
    }