Question

好。这令我感到沮丧，我无法在任何地方找到答案（我一直在寻找）。

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-4">Content block 1</div>

        <div class="col-xs-12 col-sm-4">Content block 2  Content block 2  Content block 2  Content block 2 Content block 2</div>

        <div class="col-xs-12 col-sm-4">Content block 3</div>

        <div class="col-xs-12 col-sm-4">Content block 4 </div>

    </div>

</div>

如果您运行代码，内容阻止4应该从清除内容1，内容2和内容3的新行开始。相反，它位于内容3下。

我正在寻找的是一些方法让div在它结束时立即清除左侧的所有方框。我知道我可以在第三个div之后清楚地知道它是否有效。问题是bootstrap支持4种不同的布局，因此它必须能够响应所有大小xs，sm，md和lg。当然，我可以写一个PHP脚本来计算和编写四个中的每一个的目标明确的div，但必须有一个更简单的方法。它可能是一个简单的CSS包含，我看起来，看起来和看起来。

任何想法都会受到赞赏。

Answer 1

您可以使用<?php if (isset($_POST['submit'])){ session_start(); $username = $_POST['username']; $password = $_POST['password']; $query = "SELECT * FROM users WHERE username='$username' AND password='$password'"; $result = mysql_query($query)or die(mysql_error()); $num_row = mysql_num_rows($result); $row=mysql_fetch_array($result); if( $num_row > 0 ) { $_SESSION['id']=$row['user_id']; header('location:index.php'); } else{ ?> <div class="alert alert-danger">Access Denied</div> <?php } } ?> CSS选择器来解决此问题。请阅读此article以获取更多信息。

就是这样的。点击'运行代码段'，然后选择'整页'

nth-child(n)

.col-sm-4:nth-child(3n+1) {
  clear: left;
}

Answer 2

问题是你在一行中有4 * col-sm-4。 Bootstrap正在使用12-col网格，你试图将16个cols放在一行中。由于“内容块2”的内容比其余块的内容更大（更高），所以浮点数不会清除该div，并且“内容块4”将被卡在“内容块3”之下。

解决方案1： 将列拆分为两行：

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-4">Content block 1</div>
    <div class="col-xs-12 col-sm-4">Content block 2 Content block 2 Content block 2 Content block 2 Content block 2</div>
    <div class="col-xs-12 col-sm-4">Content block 3</div>

  </div>
  <div class="row">

    <div class="col-xs-12 col-sm-4">Content block 4</div>

  </div>
</div>

解决方案2：使用.clearfix和Bootstraps响应实用程序类的组合。

Bootstrap documentation

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-4">Content block 1</div>
    <div class="col-xs-12 col-sm-4">Content block 2 Content block 2 Content block 2 Content block 2 Content block 2</div>
    <div class="col-xs-12 col-sm-4">Content block 3</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-sm-block"></div>

    <div class="col-xs-12 col-sm-4">Content block 4</div>
  </div>
</div>

Answer 3

只有div使用块中具有相同大小的正确元素

<div class="row">

    <div class="col-xs-12 col-sm-4"><p>Content block 1</p></div>

    <div class="col-xs-12 col-sm-4"><p>Content block 2</p><p>Content block 2</p><p>Content block 2</p></div>

    <div class="col-xs-12 col-sm-4"><p>Content block 3</p><p>Content block 3</p><p>Content block 3</p></div>

    <div class="col-xs-12 col-sm-4"><p>Content block 4</p><p>Content block 4</p><p>Content block 4</p></div>


    <div class="col-xs-12 col-sm-4"><p>Content block 5</p></div>

    <div class="col-xs-12 col-sm-4"><p>Content block 6</p></div>

</div>

Bootstrap div包装不清除前一行

3 个答案: