Question

我使用bootstrap3创建了一个页面，其中包含6个面板，3个col-md-4和3个col-md-8。 3 col-md-4应向左浮动，3 col-md-8应向右浮动，但是每个人都有条件存在（所以页面上总是有6个面板）。

当所有6个人都在进行布局时，布局如下：

[col-md-4(1)][  col-md-8(1)  ]
[col-md-4(2)][  col-md-8(2)  ]
[col-md-4(3)][  col-md-8(3)  ]

如果缺少col-md-4（1），例如布局如下：

[col-md-4(2)][  col-md-8(1)  ]
[col-md-4(3)][  col-md-8(2)  ]
             [  col-md-8(3)  ]

但每个小组仅上升1＆＃34;等级＆＃34;在最大值，如果col-md-4（1）和（2）缺失，例如布局将如下所示：

             [  col-md-8(1)  ]
[col-md-4(3)][  col-md-8(2)  ]
             [  col-md-8(3)  ]

那么堆叠这些面板以使它们正常工作的正确方法是什么？

我在另一篇帖子中看到了一个答案，这个帖子给了这个＆＃34;修复＆＃34;：

HTML

<div id="container">
    <div id="left">
        <div id="first"></div>
        <div id="second"></div>
    </div>
    <div id="right">
        <div id="third"></div>
        <div id="fourth"></div>
    </div>
</div>

CSS

#left {
    float: left;
}
#right {
    float: right;
}

但是当我尝试使用时，结果是：

[col-md-4(1)]
[col-md-4(2)]
[col-md-4(3)]
[  col-md-8(1)  ]
[  col-md-8(2)  ]
[  col-md-8(3)  ]

col-md-8没有浮动

Answer 1

不，你不应该这样做，我得到的是你想要所有你的col 4值在左边，所有列值8在右边？
您可以查看我刚刚发布的链接：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-4">
    This is col-md 4
  </div>
  <div class="col-md-8">
    This is col-md-8
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    This is col-md 4
  </div>
  <div class="col-md-8">
    This is col-md-8
  </div>
</div><div class="row">
  <div class="col-md-4">
    This is col-md 4
  </div>
  <div class="col-md-8">
    This is col-md-8
  </div>
</div><div class="row">
  <div class="col-md-4">
    This is col-md 4
  </div>
  <div class="col-md-8">
    This is col-md-8
  </div>
</div>

<强> CSS

.col-md-4
{

  background-color: lightblue;
}
.col-md-8
{
  background-color: pink;
}

这是链接
http://codepen.io/Rehman/pen/WxaGbE

div没有一直漂浮到顶部

1 个答案: