使用Bootstrap 4垂直对齐嵌套行

时间：2017-06-04 06:46:14

标签： html css twitter-bootstrap css3 twitter-bootstrap-4

使用Bootstrap 4时，我在尝试分别使用field2和align-items-start时垂直对齐嵌套行时遇到问题。

Image of desired layout. There is one large square the height of the window taking up the left half of the space. To the right of the large square are two wide, short rectangles. The first one is aligned to the top of the square on the left. The second one is below the first and is aligned with the bottom of the square on the left.

这是我目前的代码：

＆＃13;
＆＃13; 
align-items-end
＆＃13;
＆＃13;
＆＃13;

这是一个小提琴：http://jsfiddle.net/SIRmisterD/x1hphsvb/17/

据我所知，当我检查元素时，父列（<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="container-fluid"> <div class="row justify-content-around"> <div class="col-sm-2 align-self-center"> <!-- Left side col --> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> </div> <div class="col-sm-8"> <!-- Right side col --> <div class="row align-items-start" style="background-color:gray;"> <!-- Upper right row --> <div class="col"> <p>Right col, upper left</p> </div> <div class="col"> <p>Right col, upper right</p> </div> </div> <div class="row align-items-end" style="background-color:orange;"> <!-- Lower right row --> <div class="col"> <p>Right col, lower left</p> </div> <div class="col"> <p>Right col, lower middle</p> </div> <div class="col"> <p>Right col, lower right</p> </div> </div> </div> </div> </div>行）的大小与左侧列（col-sm-8）的大小相同，因为它们都具有相同的高度。但是，只要引入了两个嵌套行，就不会使用col-sm-2类。

1 个答案:

答案 0 :(得分：5)

＆lt; p＆gt;拥有＆lt; code＆gt; align-items - *＆lt; / code＆gt;行的类只会影响它们的内容，但不影响它们自己的位置。为了达到预期的效果，两行的父（＆lt; code＆gt; .col-sm-8＆lt; / code＆gt;元素）需要有三个类：＆lt; / p＆gt; ＆LT; UL＆GT; ＆lt; li＆gt;＆lt; code＆gt; d-flex＆lt; / code＆gt;：使列本身成为弹性箱（默认情况下，只有行具有＆lt; code＆gt; display：flexbox＆lt; / code＆gt; in Bootstrap 4）＆lt; / li＆gt; ＆lt; li＆gt;＆lt; code＆gt; flex-column＆lt; / code＆gt;：从上到下而不是从左到右显示儿童＆lt; / li＆gt; ＆lt; li＆gt;＆lt; code＆gt; justify-content-between＆lt; / code＆gt;：让孩子们之间有空间 ＆LT; UL＆GT; ＆lt; li＆gt;这可能看似错误，因为通常＆lt; code＆gt; justify-content-between＆lt; / code＆gt;应用于X /主轴，但是我们已经应用了＆lt; code＆gt; flex-column＆lt; / code＆gt; class，这个类的效果也会被反转，影响Y轴而不是＆lt; / li＆gt; ＆LT; / UL＆GT;＆LT; /锂＆GT; ＆LT; / UL＆GT; ＆lt; p＆gt;将这三个类插入到列中并从行中删除不必要的类将实现所需的布局。＆lt; / p＆gt; ＆lt; p＆gt;您更新的代码段：＆lt; / p＆gt; ＆lt; p＆gt;＆lt; div class =＆＃34; snippet＆＃34;数据琅=＆＃34; JS＆＃34;数据隐藏=＆＃34;真＆＃34;数据的控制台=＆＃34;真＆＃34;数据巴贝尔=＆＃34;假＆＃34;＆GT;＆＃13; ＆lt; div class =＆＃34; snippet-code snippet-current-hidden＆＃34;＆gt;＆＃13; ＆lt; pre class =＆＃34; snippet-code-html lang-html prettyprint-override＆＃34;＆gt;＆lt; code＆gt;＆lt; link rel =＆＃34; stylesheet＆＃34; HREF =＆＃34; HTTPS：//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"完整性=＆＃34; SHA384-rwoIResjU2yc3z8GV / NPeZWAv56rSmLldC3R / AZzGRnGxQQKnKkoFVhFQhNUwEyJ＆＃34; crossorigin =＆＃34;匿名＆＃34;＆GT;＆＃13; ＆lt; div class =＆＃34; container-fluid＆＃34;＆gt;＆＃13;   ＆lt; div class =＆＃34; row justify-content-around align-items-stretch＆＃34;＆gt;＆＃13;     ＆lt; div class =＆＃34; col-sm-2＆＃34;＆gt;＆＃13;       ＆lt;！ - 左侧col - ＆gt;＆＃13;       ＆lt; p＆gt;内容在此处＆lt; / p＆gt;＆＃13;       ＆lt; p＆gt;内容在此处＆lt; / p＆gt;＆＃13;       ＆lt; p＆gt;内容在此处＆lt; / p＆gt;＆＃13;       ＆lt; p＆gt;内容在此处＆lt; / p＆gt;＆＃13;       ＆lt; p＆gt;内容在此处＆lt; / p＆gt;＆＃13;       ＆lt; p＆gt;内容在此处＆lt; / p＆gt;＆＃13;       ＆lt; p＆gt;内容在此处＆lt; / p＆gt;＆＃13;     ＆LT; / DIV＆GT;＆＃13;     ＆lt; div class =＆＃34; col-sm-8 d-flex flex-column justify-content-between＆＃34;＆gt;＆＃13;       ＆lt;！ - 右侧col - ＆gt;＆＃13;       ＆lt; div class =＆＃34; row＆＃34;风格=＆＃34;背景色：灰色;＆＃34;＆GT;＆＃13;         ＆lt;！ - 右上角 - ＆gt;＆＃13;         ＆lt; div class =＆＃34; col＆＃34;＆gt;＆＃13;           ＆lt; p＆gt;右上角，左上角＆lt; / p＆gt;＆＃13;         ＆LT; / DIV＆GT;＆＃13;         ＆lt; div class =＆＃34; col＆＃34;＆gt;＆＃13;           ＆lt; p＆gt;右上角，右上角＆lt; / p＆gt;＆＃13;         ＆LT; / DIV＆GT;＆＃13;       ＆LT; / DIV＆GT;＆＃13;       ＆lt; div class =＆＃34; row＆＃34;风格=＆＃34;背景色：橙;＆＃34;＆GT;＆＃13;         ＆lt;！ - 右下行 - ＆gt;＆＃13;         ＆lt; div class =＆＃34; col＆＃34;＆gt;＆＃13;           ＆lt; p＆gt;右侧col，左下角＆lt; / p＆gt;＆＃13;         ＆LT; / DIV＆GT;＆＃13;         ＆lt; div class =＆＃34; col＆＃34;＆gt;＆＃13;           ＆lt; p＆gt;右上，下中＆lt; / p＆gt;＆＃13;         ＆LT; / DIV＆GT;＆＃13;         ＆lt; div class =＆＃34; col＆＃34;＆gt;＆＃13;           ＆lt; p＆gt;右侧col，右下角＆lt; / p＆gt;＆＃13;         ＆LT; / DIV＆GT;＆＃13;       ＆LT; / DIV＆GT;＆＃13;     ＆LT; / DIV＆GT;＆＃13;   ＆LT; / DIV＆GT;＆＃13; ＆LT; / DIV＆GT;＆LT; /代码＆GT;＆LT; /预＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / p为H. ＆lt; p＆gt;＆lt; a href =＆＃34; http：//jsfiddle.net/siavasfiroozbakht/tk7p7j4r/" rel =＆＃34; noreferrer＆＃34;＆gt; JSFiddle＆lt; / a＆gt;同样。＆lt; / p＆gt; ＆lt; p＆gt;似乎将两个Bootstrap样式表导入到Fiddle中，其中一个是v4，另一个是自定义的一个v3 - ＆lt; strong＆gt;这可能会导致问题，因为这两个类都应用了样式，所以它可以最好只保留版本4.＆lt; / strong＆gt;＆lt; / p＆gt; ＆lt; p＆gt;有关flexbox的详细信息，请参阅＆lt; a href =＆＃34; https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel =＆＃34; noreferrer＆＃34;＆gt; CSS-Tricks.com指南＆lt; / a＆gt;和关于＆lt; a href =＆＃34; https://v4-alpha.getbootstrap.com/layout/grid/" rel =＆＃34; noreferrer＆＃34;＆gt; Bootstrap 4网格系统＆lt; / a＆gt;。＆lt; / p＆gt;
相关问题
最新问题