为什么我的 bootstrap v3 列在我的手机 phone 上不是 100% 宽？

Question

我现在已经阅读了很多关于 bootstraps 断点和网格系统的内容，并细读了许多 Whosebug 问题，但仍然一头雾水。

我有一个像这样的简单 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>

在网络浏览器中，这呈现得很漂亮，但在我的 phone 上，图像和文本继续占据一行，没有中断，因此图像被缩放得又小又丑，我想要 Bootstrap 做它最擅长的事情，以全 phone 宽度渲染该图像，并在其下方渲染下一个图像，即打断这两列。

活体样本是她，目前：

http://hobart.gamessociety.info/

如果有经验的人可以提供一些见解，说明为什么这不会像我希望的那样在我的 phone 上呈现，我将不胜感激。

据我了解 bootstrap 首先是 phone，md 说在中等和较大屏幕上应用 5/7 分割，在较小屏幕上做它明智的事情，即不缩放图像缩小比例并并排显示两列，但在它们之间断开并显示一列在另一列之上。

Answer 1

class“vertical-align”添加了 css 样式“display:flex”，如果您删除它，您将看到项目按照您当前的期望运行（我认为）。使用 chrome 并检查 add/remove css 样式。

您可以将 col-xs-12 添加到每个 div class。

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

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

并将其添加到内部 divs

<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

为什么我的 bootstrap v3 列在我的手机 phone 上不是 100% 宽？

Why is my bootstrap v3 column not 100% wide on my mobile phone?

twitter-bootstrap-3