Question

我是一名新开发人员，试图启动并运行自举网站。当然，我遇到了垂直对齐的典型新手问题。我认为通过向.vcenter元素添加一个类.row，我的问题将得到解决（至少对于垂直居中的情况）。 .vcenter类（基本上）具有display: flex和align-items: center属性/值对。这个想法来自Hashem Qolami对垂直对齐的优秀SO答案。

HOWEVER ，当我调整浏览器窗口大小时，网格列不会像他们应该那样堆叠，即使我将.col-xs-12类应用于每列 。相反，如果窗口变得足够小，则列以非常丑陋的方式重叠。 Here is a bootply with the relevant html/css。要查看我正在谈论的内容，请导航到上面链接的bootply并单击电话图标以打开移动大小的屏幕。如果将窗口缩小到足够小，那么列的重叠就会很难看。更重要的是，列应该是堆叠的（如您关闭.vcenter类所示）。

问题是我可以同时使用flexboxes和bootstrap网格系统，还是在这两种情况下两者之间缺乏兼容性？我想可能的解决方案是关闭移动屏幕的display: flex属性或使用inline-block进行垂直对齐，但我正在寻找更基本的理论解释。继续在这里。

这里是来自bootply的代码：

HTML

<!DOCTYPE html>
<html>
<head><!-- bootstrap css automatically included by bootply --></head>
 <body>
  <div class="container">
   <div class="row vcenter">
    <div class="col-xs-12 col-md-5 bluebox">
     <h1>Big Blue Box</h1>
    </div>
    <div class="col-xs-12 col-md-7 redbox">
     <h1>Big Red Box</h1>
    </div>
   </div>
  </div>
 </body>
</html>

CSS

/* CSS used here will be applied after bootstrap.css */

.bluebox {
    color: #FFF;
    background-color: blue;
}

.redbox {
    color: #FFF;
    background-color: red;
}

/* FLEXBOX CLASSES */

.vcenter {
  min-height: 100%;  /* Fallback for vh unit */
  min-height: 100vh; 

  display: flex; 
  align-items: center;

/* Bootply includes properties for cross-browser compatibility */
}

Answer 1

您可以在最小宽度的媒体查询中放置您想要的大视口。

http://www.bootply.com/p4ndb1MiZK

删除col-xs-12，不是必需的，所有的东西都是最后一列的全宽，所以如果没有其他类的话，col-md下的任何东西都是全宽的，带有相同的填充。

这里发生的是，如果你将样式放在媒体查询之外，它们适用于所有视口大小，如果你将flexbox放在最小宽度内，那么它就是那个媒体查询，直到另一个媒体查询在此之后带有另一个值，如果有的话。

Hashem Qolami是一个摇滚明星，他的代码总是很稳定，但flex适用于现代浏览器，如果你打算在IE 8上看起来不错，那么使用display：table和display：table-cell。

注意：我没有缩进你的CSS，但是当样式在媒体查询中时，它们是缩进的。

当使用flexbox在其包含的行中垂直居中列时，如何将引导网格列堆叠在移动屏幕上？

1 个答案: