为什么我的bootstrap v3列在手机上没有100％宽？

如何解决为什么我的bootstrap v3列在手机上没有100％宽？

我现在已经阅读了很多有关引导程序断点和网格系统的信息，并仔细研究了许多stackoverflow问题，但仍然措手不及。

我有一个简单的bootstrap v3容器，如下所示：

            <div class="container">
                <div class="row col-md vertical-align">
                    <div class="col-md-5">
                        image
                    </div>
    
                    <div class="col-md-7 d-flex">
                        text
                    </div>
                </div>
            </div>

在网络浏览器中，它的渲染效果很漂亮，但是在我的手机上，图像和文本仍连续占据一行，并且不间断，图像因此变得很小又丑陋，我希望Bootstrap尽其所能，以完整的手机宽度及其下方的下一个图像渲染该图像，即打破这两列。

她现在是一个活样本：

http://hobart.gamessociety.info/

如果有经验的人可以对为什么这种方式无法像我在手机上那样呈现，我将不胜感激。

据我所知，开机首先是手机，而md表示将5/7分割应用于中型和大型屏幕，而在较小的屏幕上则做得很合理，即不要将图像缩放到很小的比例，并排显示两列，但要在它们之间断开并在另一个之上显示。

解决方法

如果删除该类，则“ vertical-align”类将添加css样式“ display：flex”，以使您看到的项目行为符合您当前的期望（我认为）。使用chrome并检查添加/删除CSS样式。

您可以只向每个div类添加col-xs-12。

       <div class="container">
            <div class="row col-md vertical-align">
                <div class="col-md-5 col-xs-12">
                    image
                </div>

                <div class="col-md-7 col-xs-12 d-flex">
                    text
                </div>
            </div>
        </div>

这是第二个问题的替代方法

创建一个CSS类

.myClass {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

并将其添加到内部div

<div class="container">
    <div class="row">
      <div class="col-md-5 myClass">
        image
      </div>

     <div class="col-md-7 myClass">
        text
     </div>
    </div>
</div>

在这里Twitter Bootstrap 3,vertically center content找到答案了