行を含むブートストラップを使用して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
を中心に左側に揃えなっているが、最後の列が表示なっていません右側にあります。
どうすればこの問題を解決できますか?
更新されますか? –
@FarzinKanzi彼の問題は、提供されたコードで再現可能です。 –