html - Bootstrap 网格项不会彼此并排呈现

Question

我在使用 Bootstrap 网格系统时遇到了问题。下面的div <div class="col-xs-12 col-md-4">应该在右侧，而其他 div 在左侧。目前，前两列 div 是正确的并在顶部呈现，但是第三列 div 直到图像底部才呈现，而不是在图像底部呈现。我需要它们正确显示，我该怎么办？

                  <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-md-7">
                                <h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
                            </div>
                            <div class="col-xs-12 col-md-4">
                                <img src="images/tie.png">
                            </div>
                            <div class="col-xs-12 col-md-7">
                                <div class="loginText">
                                    Get information about your Connect plan 
                                    <br><br>
                                    If you have any problems logging in, please contact your account manager for help.
                                    <br><br>
                                </div>
                            </div> <!-- cols -->
                        </div> <!-- row -->
                    </div> <!-- container -->

看起来像这样

第三个 div 需要上移到第一个 div 下面，但它目前低于第二个 div 的高度。

Answer 1

Bootstrap 的框架构建在12 列布局上。

所以

col-md-7 + col-md-4 + col-md-7 = 18 列超过 12 列限制，因此将第三个 div 推到下一行。

您可以通过将 col-md 更改为 col-md-5 + col-md-2 + col-md-5 像这样:

<div class="row">
    <div class="col-xs-12 col-md-5">
        <h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
    </div>
    <div class="col-xs-12 col-md-2">
        <img src="images/tie.png">
    </div>
    <div class="col-xs-12 col-md-5">
        <div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
        </div>
    </div> <!-- cols -->
</div>