Question

如何将列浮动到包含在同一行内的所有上面列的右侧。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="row content">
  <div class="col-md-8 first-content">
    Some content
  </div>
  <div class="col-md-8 second-content">
    Some other content
  </div>
  <div class="col-md-4 float-right-top">
    This content need to float left
  </div>
</div>

＆＃13;

请参考图片以获得清晰的图片

Answer 1

只需将position: absolute，right: 0;和top: 0;添加到float-right-top课程。

HTML：

<div class="row content">
  <div class="col-md-8" first-content>
    Some content
  </div>
  <div class="col-md-8 second-content">
    Some other content
  </div>
  <div class="col-md-4 float-right-top">
    This content need to float left
  </div>
</div>

CSS：

.float-right-top {
  position: absolute;
  right: 0;
  top: 0;
}

小提琴： https://jsfiddle.net/8Lurbc78/

Answer 2

试试这个

工作小提琴：https://jsfiddle.net/qeu3t8gk/

＆＃13;

.left{min-height:500px;}
.float-right-top{height200px; background:blue;top:0px;position:fixed;right: 0; }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="row content ">
  <div class="col-md-8 left" >
    Some content
  </div>
  <div class="col-md-8 left">
    Some other content
  </div>
  <div class="col-md-4 float-right-top">
    This content need to float left
  </div>
</div>

＆＃13;

Answer 3

要点您使用的课程内容搞砸了CSS

在每个引导行中，您有12列。现在看看代码。您已为第一个内容class="col-md-8 first-content"分配了8列 12-8 = 4因此，您只剩下4列，并且已将这4列分配给第三个div。请注意，默认情况下浮动是左边的。一切都从左边开始。因此，它将放在row

的右侧

如果您使用div之间的边距添加额外空格，则会自动将其移至下方的额外行

所以确保你有所有潜水

margin :0px;

这是完整的代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

  <div class="row">

        <div class="col-md-8">
            Some content
          </div>
            <div class="col-md-4">
            This content need to float left
          </div>
          <div class="col-md-8">
            Some other content
          </div>

  </div>


</body>
</html>

您的代码也出了什么问题？

您已在同一行中设置了2 div个col-8。因此，浏览器会将其计算为8+8=16，并且它也会理解16>12（12是您在row中可以拥有的最大列数）。因此，它无法承受，所以它会额外row，并在第二行放置第二个div并为其分配8列。

请参阅下图：

Answer 4

我已经更新了@StaXter的答案。

创建左右父div，并将内容放入其中。

<强> HTML

<div class="row content">
  <div class="right">
      <div class="col-md-8" first-content>
        Some content
      </div>
      <div class="col-md-8 second-content">
        Some other content
      </div>
  </div>
  <div class="left">
      <div class="col-md-4 float-right-top">
        This content need to float left
      </div>
  </div>
</div>

<强> CSS

.right,.left{
  float:left;
}
.right {
  width:70%
}
.left{
  width:30%;
}

Answer 5

如何嵌套行？在这里小提琴：https://jsfiddle.net/p3qrexxe/

<强> HTML

<div class="row content">
  <div class="col-md-8 nomargin">
    <div class="col-md-12 first-content">
      Some content
    </div>
    <div class="col-md-12 second-content">
      Some other content
    </div>
  </div>
  <div class="col-md-4 nomargin">
    <div class="col-md-12 float-right-top">
      This content need to float left
    </div>
    <div class="col-md-12 float-right-top2">
    This content need to float left 2
    </div>
  </div>
</div>

<强> CSS

.nomargin {padding: 0;}

Bootstrap如何将列向左浮动到页面顶部

5 个答案: