html - Bootstrap 列未在右侧对齐

Question

我使用包含行的 Bootstrap 创建了一个 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 的左侧对齐code> 居中，但最后一列未显示在右侧。

我该如何解决这个问题？

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