[英]Bootstrap Layout Nesting?
我是新手,无法进行嵌套。 我有一个尝试重新创建的布局,但没有在这里看到正确的结果,即布局图像 。
我的代码http://www.bootply.com/0BETlZMU7T
<div class="container-fluid">
<div class="row">
<div class="col-md-4">image with image text here</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">A Text</div>
<div class="col-md-6">B Text</div>
</div>
<div class="row">
<div class="col-md-6">Y Text</div>
<div class="col-md-6">Z Text</div>
</div>
</div>
</div>
</div>`
使用默认引导程序无法进行垂直对齐,但是您可以使用此解决方案中显示的代码通过Bootstrap 3实现垂直对齐
您的updatetd html如下所示:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">image with image text here</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">A Text</div>
<div class="col-md-6">B Text</div>
</div>
<div class="row">
<div class="col-md-6">Y Text</div>
<div class="col-md-6">Z Text</div>
</div>
</div>
</div>
</div>
和您的CSS一样:
/*From:
https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3#answer-25517025
*/
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
/**
* "flex: 1" or "flex-grow: 1" is added to make the inner div
* - Which is also a flex-item - take up all the horizontal space
* available space inside the flex container (.col-* elements)
*/
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
/* flex: 1; */
flex-grow: 1;
}
我为您的代码提供了一个示例,并将项目“ A,B,X,Y”合并为一行,因为您不需要第二行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.