css - Bootstrap 显示列并排

问题描述

我正在使用 bootstrap 4 和 php 编写示例应用程序。我试图让两列在某个断点处彼此相邻显示。这是一个例子。我能做些什么来解决这个问题？

<html>
<head>
    <!--bootstrap 4.0-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3" style="margin: 20px 0;">
                <h4>Search</h4>
            </div>
            <div class="col-lg-3" style="margin: 20px 0;">
                 <h4>Displaying ### results</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-sm-12">
                <p>Search field</p>
                <p>Search field</p>
                <p>Search field</p>
                <p>Search field</p>
            </div>
            <!-- at col-sm-6 I want two columns to display. how can i solve this? -->
            <div class="col-lg-9 col-sm-6">
            <?php for($i=0; $i<10; $i++) 
            {
            ?>
                <div>
                    Record
                    <hr/>
                </div>
            <?php
            }
            ?>
            </div>
        </div>
    </div>
    <!--bootstrap 4 javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

标签： cssbootstrap-4multiple-columns

关于 Bootstrap，要记住的最重要的事情是，每一行必须有列加起来为 12。而不是放在col-sm-6每个记录容器上，你要做的就是把它放在row上面，然后添加col-6到每个记录容器中。<div>记录在 PHP 循环中输出的元素。

这可以在下面看到：

<html>

<head>
  <!--bootstrap 4.0-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-3" style="margin: 20px 0;">
        <h4>Search</h4>
      </div>
      <div class="col-lg-3" style="margin: 20px 0;">
        <h4>Displaying ### results</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-sm-12">
        <p>Search field</p>
        <p>Search field</p>
        <p>Search field</p>
        <p>Search field</p>
      </div>
      <!-- at col-sm-6 I want two columns to display. how can i solve this? -->
      <div class="col-lg-9 row">
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
        <div class="col-6">
          Record
          <hr/>
        </div>
      </div>
    </div>
  </div>
  <!--bootstrap 4 javascript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>

</html>

另外，请注意，这col-6将适用于 Bootstrap 4中的所有col-sm-6宽度，而仅适用于大于575px 的宽度：

css - Bootstrap 显示列并排

问题描述

解决方案

推荐阅读