ブートストラップセット余白左がコンテナ

Question

ブートストラップに問題があります。私は2つの要素を設定したい - 中央にあるコンテンツ（名前は.topとする）と別のものを均等に左側に.topに設定し、右側ではブラウザの右側に貼り付けますそれは.btm）。 私は.containerクラスを追加しますとき、それは（margin-left: autoとmargin-right: autoを追加することで）私の.top要素を中心に説明することが、左側に.top要素と同じレベルにあることを.btm要素を作る方法を知っていますか？ 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

あなたは私の友人

を行きます

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 2

あなたは.btm部への後、最後に<div class="container">を閉じる必要がありBTMクラス

.btm{ 
     background: #008B4F; 
    } 

Answer 3

から左の余白を削除します。

あなたがしたことは、「.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; 
}