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标记了所有列，标识为messageBox的元素在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。这是你更新的代码

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>

Answer 4

您可以添加pull-right

＆＃13;

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

＆＃13;

Bootstrap列不在右侧对齐

4 个答案: