Bootstrap-Spalte nicht auf der rechten Seite ausgerichtet

Question

Ich erstellte eine HTML-Seite mit Bootstrap mit Zeilen. Ich versuche, eine Zeile in drei Teile zu teilen, aber die dritte wird nicht richtig ausgerichtet.

Meine Html-Code:

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

markiert ich alle Spalten durch Hinzufügen der Klasse col-md-4 das Element mit der ID messageBox ist auf der linken Seite ausgerichtet ist immer die gauge zentriert ist, aber die letzte Spalte wird nicht angezeigt bekommen auf der rechten Seite.

Wie kann ich das beheben?

Answer 1

Es ist nicht an den richtigen Ausrichtung, weil die normalen Netzverhalten mit dem Inline-Styles für width und 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> 

außer Kraft gesetzt wird, es funktioniert gut, wenn Sie diese Stile entfernen: http://www.codeply.com/go/mRedj994PD

Answer 2

Entfernen Sie den Rand in der linken Spalte.

Answer 3

können Sie 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

Sie niemals Marge auf den Säulen div hinzufügen, wenn Sie es die Marge dann ein anderes div hinzufügen und fügen Sie geben möchten, aber nicht auf Spalte div. hier wird Sie Code aktualisiert

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>