Twitter bootstrap 3 为什么我的引导v3列在我的手机上不是100%宽？

我现在已经读了很多关于引导断点和网格系统的书，并仔细阅读了许多stackoverflow问题，但仍然被迷惑了

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

形象
文本

在网络浏览器中，这渲染得很漂亮，但在我的手机上，图像和文本继续占据一行，没有中断，因此图像缩放得很小很难看，我希望Bootstrap做得最好，以手机的全宽渲染该图像，然后在其下方渲染下一个图像，也就是打断这两列

她目前有一个活样本：

如果有经验的人能深入了解为什么这不能像我在手机上希望的那样呈现，我将不胜感激

据我所知，bootstrap首先是手机，md说在中型和大型屏幕上应用5/7分割，在小型屏幕上使用5/7分割，这样做是明智的，也就是说，不要将图像缩放到很小的比例，并排显示两列，而是在两列之间断开，一列显示在另一列之上。

类“垂直对齐”添加了css样式“display:flex”如果你删除了它，你会看到你现在想要的东西（我想），使用chrome和inspect来添加/删除css样式

您可以将col-xs-12添加到每个div类中

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

并将其添加到内部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>

形象
文本

---

在这里找到了答案

确实如此。谢谢。但是删除会导致第二个问题。因为右侧框中的文本不是相对于图像垂直居中的，而是在顶部，看起来很可怕。垂直对齐是解决该问题的方法。还有其他方法使文本垂直居中吗？谢谢（有点）工作。我必须把！重要的浮点数放在浮点数上，因为某种原因没有它就被忽略了（浏览器调试器显示了这一点，但不告诉原因）。现在它居中，在手机上呈现良好。非常感谢！但我不明白。去掉“右边距：-4”，它就不工作了。

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

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