我目前正在尝试使用 Bootstrap 4,我需要你的帮助, 我想创建一个带有一行的 2 列网格,当它变成移动设备时,第二列转到行:
所以我这样做:
<div class="row">
<div class="col-md-10 offset-md-1 col-sm-10 offset-sm-1">
<div class="col-md-6 col-sm-12">
<img src="my source" alt="My alt" />
</div>
<div class="col-md-6 col-sm-12">
<h2>My title</h2>
<p>My text</p>
</div>
</div>
</div>
它在 Bootstrap 3 上工作,但在 V4 中不工作。
我想要这样的东西:
.row>div{
width: 49.7%;
display: inline-block;
}
@media screen and (max-width: 991px){
.row>div{
width: 100%;
display: block;
}
}
<div class="row">
<div id="first_column">My first column</div>
<div id="second_column">My second column</div>
</div>
我怎样才能做到?谢谢你帮助我,
最佳答案
你几乎是对的。我已经删除了这个 div:
<div class="col-md-10 offset-md-1 col-sm-10 offset-sm-1">
所以我认为这就是您正在寻找的代码:
<div class="row">
<div class="col-sm-12 col-md-6">
<img src="my source" alt="My alt" />
</div>
<div class="col-sm-12 col-md-6">
<h2>My title</h2>
<p>My text</p>
</div>
</div>
这适用于 Bootstrap 4。
关于html - Bootstrap 4 我的 col 不会在移动设备中排队,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50554082/