Question

我使用 bootstrap v.4 进行具有两列的响应式设计，并使用两个md和xs断点。以下是我的代码jsfiddle link

.left-box{
    background-color:red;
    height:50px;
    margin-bottom:15px;
 }
.right-box{
    background-color:yellow;
    height:150px;
    margin-bottom:15px;
 }

<div class="container">
    <div class="col-xs-12 col-md-3 left-box pull-xs-left">A1</div>

    <div class="col-xs-12 col-md-9 right-box pull-xs-right">B1</div>

    <div class="col-xs-12 col-md-3 left-box pull-xs-left">A2</div>

    <div class="col-xs-12 col-md-9 right-box pull-xs-right">B2</div>

    <div class="col-xs-12 col-md-3 left-box pull-xs-left">A3</div>
</div>

在xs断点处结果可以如下图所示：

我想要md断点结果如下

预期的md断点

但结果是：

有没有办法用css解决这个问题？

Answer 1

为什么你不能像以下小提琴一样使用两列？

https://jsfiddle.net/h30jjvgo/2/

左右div可以在单独的div中。

 .left-box{
 background-color:red;
  height:100px;
  margin-bottom:15px;
  float:none;
  width:100%;
}
.right-box{
 background-color:yellow;
  height:150px;
  margin-bottom:15px;
  width:100%;
}

 <div class="container">
  <div class="col-xs-6">
    <div class="col-xs-3 left-box pull-xs-left">A1</div>
    <div class="col-xs-3 left-box pull-xs-left">A2</div>
    <div class="col-xs-3 left-box pull-xs-left">A3</div>
  </div>
  <div class="col-xs-6">
    <div class="col-xs-9 right-box pull-xs-right">B1</div>
    <div class="col-xs-9 right-box pull-xs-right">B2</div>
  </div>
</div>

Answer 2

尝试以下方法，包含所有内部12列的3列，9列

https://atlas.hashicorp.com/bento/boxes/ubuntu-16.04

.left-box {
  background-color: red;
  height: 100px;
  margin-bottom: 8px;
  float: none;
  width: 100%;
}

.right-box {
  background-color: yellow;
  height: 150px;
  margin-bottom: 15px;
  width: 100%;
}

<div class="row">
  <div class="col-xs-3">
    <div class="row">
      <div class="col-xs-3 left-box pull-xs-left">A1</div>
      <div class="col-xs-3 left-box pull-xs-left">A2</div>
      <div class="col-xs-3 left-box pull-xs-left">A3</div>
    </div>
  </div>
  <div class="col-xs-9">
    <div class="row">
      <div class="col-xs-9 right-box pull-xs-right">B1</div>
      <div class="col-xs-9 right-box pull-xs-right">B2</div>
    </div>
  </div>
</div>

Answer 3

使用col-md-*代替一点CSS在md网格层上启用float:right。

HTML

<div class="container">
    <div class="row">
        <div class="col-md-3 left-box">A1</div>
        <div class="col-md-9 right-box pull-md-right">B1</div>
        <div class="col-md-3 left-box">A2</div>
        <div class="col-md-9 right-box pull-md-right">B2</div>
        <div class="col-md-3 left-box">A3</div>
    </div>
</div>

CSS

@media (min-width:992px) {
    .pull-md-right {
        float:right;
    }
}

Codeply Demo

修改的 Bootstrap 4已经有pull-md-right，所以你不需要额外的CSS，它工作正常。您不应该使用pull-xs-right。

http://www.codeply.com/go/cED1AH8AX9

响应使用bootstrap从两列更改为一列

3 个答案: