ブートストラップの列が右辺で整列していない

Question

行を含むブートストラップを使用してhtmlページを作成しました。 3つの行を1つに分割しようとしていますが、3つ目の行が正しく配置されていません。

私のHTMLコード：私はID messageBoxでクラスcol-md-4に要素を追加することにより、すべての列をマークし

<!-- Row Containing 3 Columns --> 
<div class="row"> 



    <div class="col-md-4" id="messagesBox" style="margin-left: 10px;"> 

     <h2>List Entries</h2> 

     <!-- 
     <div class="list-group"> 
      <div class="list-group-item list-group-item-action flex-column align-items-start"> 
       <div class="d-flex w-100 justify-content-between"> 
        <h3 class="mb-1">List group item heading</h3> 
        <small>3 days ago</small> 
       </div> 
       <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
       <small>Donec id elit non mi porta.</small> 
      </div> 
     </div> 
     --> 
    </div> 

    <!-- Gauge In Center Of Screen --> 
    <div class="col-md-4"> 
     <div id="gauge" style="width: 500px; height: 400px;"></div> 
    </div> 


    <!-- Section should be on the right side of the screen --> 
    <div class="col-md-4" style="background-color: orangered"> 
     <div>Some content</div> 
    </div> 
</div> 

がgaugeを中心に左側に揃えなっているが、最後の列が表示なっていません右側にあります。

どうすればこの問題を解決できますか？

Answer 1

通常のグリッドの挙動がwidthとmargin-leftのためのインラインスタイルで上書きされているので、それは...、右に

<div class="row"> 
     <div class="col-md-4" id="messagesBox"> 

      <h2>List Entries</h2> 
     </div> 
     <div class="col-md-4"> 
      <div id="gauge" style="height: 400px;"></div> 
     </div> 
     <!-- Section should be on the right side of the screen --> 
     <div class="col-md-4" style="background-color: orangered"> 
      <div>Some content</div> 
     </div> 
</div> 

を合わせていないあなたはこれらのスタイルを削除する場合には、正常に動作します： http://www.codeply.com/go/mRedj994PD

Answer 2

左端の余白を削除します。

Answer 3

あなたは余裕を与えたい場合は、別のdivを追加して、その上にではなく、列のdivに追加し、列のdivにマージンを追加することはありませんpull-right

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="row"> 
 
<div class="col-md-4"></div> 
 
<div class="col-md-4"></div> 
 
<div class="col-md-4 pull-right" style="background-color: orangered"> 
 
     <div>Some content</div> 
 
    </div> 
 
    
 
</div>

Answer 4

を追加することができます。ここでは、コード

HTMLあなたのスタイルである

<div class="row"> 



    <div class="col-md-4" id="messagesBox" > 

     <h2>List Entries</h2> 

     <!-- 
     <div class="list-group"> 
      <div class="list-group-item list-group-item-action flex-column align-items-start"> 
       <div class="d-flex w-100 justify-content-between"> 
        <h3 class="mb-1">List group item heading</h3> 
        <small>3 days ago</small> 
       </div> 
       <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
       <small>Donec id elit non mi porta.</small> 
      </div> 
     </div> 
     --> 
    </div> 

    <!-- Gauge In Center Of Screen --> 
    <div class="col-md-4"> 
     <div id="gauge" style="width: 500px; height: 400px;"></div> 
    </div> 


    <!-- Section should be on the right side of the screen --> 
    <div class="col-md-4" style="background-color: orangered"> 
     <div>Some content</div> 
    </div> 
</div>