我目前正在尝试使用Bootstrap 4,需要您的帮助,
我想创建一个带有一行的2列网格,当它成为移动设备时,第二列转到line:

所以我正在这样做:

        <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上工作正常。

参见:https://jsfiddle.net/5d2n72r4/

关于html - Bootstrap 4我的Col不会在移动设备中排队,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50554082/

10-12 12:25
查看更多