引導列不在右側對齊

我使用包含行的引導程序創建了一個html頁面。我想分成三個部分中的一行，但第三個沒有正確對齊。引導列不在右側對齊

我的HTML代碼：

<!-- 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>

標誌着我所有列通過添加類col-md-4元素與ID messageBox是越來越左側的gauge居中對齊，但沒有得到顯示的最後一列在右側。

我該如何解決這個問題？

來源

2017-03-13 Matthias Herrmann

哪裏是你的風格？ –

@FarzinKanzi他的問題可以通過提供的代碼重現。 –

它不對齊的權利，因爲正常的網格行爲正在與內嵌樣式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

來源

2017-03-13 11:42:26 ZimSystem

你現在正在工作 - ty –

刪除最左列中的邊距。

來源

2017-03-13 11:42:52

您可以添加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>

來源

2017-03-13 11:44:16 medbenjemaa

切勿在列格添加保證金，如果你想給的保證金，然後添加其他的div並添加就可以了，但不是在列格。這裏是你更新的代碼

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>

來源

2017-03-13 11:46:37

引導列不在右側對齊

回答

相關問題