【问题标题】：Bootstrap Display Columns Next To Each OtherBootstrap 显示列并排
【发布时间】：2018-07-03 02:45:34
【问题描述】：
我正在使用 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>
【问题讨论】：
标签：
css
bootstrap-4
multiple-columns
【解决方案1】：
关于 Bootstrap 要记住的最重要的一点是，每一行必须有加起来为 12 的列。与其将 col-sm-6 放在每个记录容器上，不如将你想要的而是将 row 放在上面，并将 col-6 添加到 PHP 循环内输出的每个 <div> 记录元素中。
这可以在下面看到：
<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 的宽度：
【解决方案2】：
您的列数似乎不匹配。
我怀疑这一点...
<div class="col-lg-3 col-sm-12">
应该是……
<div class="col-lg-3 col-sm-6">
【解决方案3】：
这是你想要的吗：
<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-9">
<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-3">
<?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>
https://jsfiddle.net/48n2hvyd/3/
【解决方案4】：
感谢您的帮助。看了你的回答后，我解决了。这是我需要的：
<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-6" style="margin: 20px 0;">
<h4>Search</h4>
</div>
<div class="col-lg-6" style="margin: 20px 0;">
<h4>Displaying ### results</h4>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
<p>Search field</p>
</div>
<div class="col-lg-9">
<div class="row">
<?php for($i=0; $i<10; $i++)
{
?>
<div class="col-lg-12 col-sm-6">
Record
<hr/>
</div>
<?php
}
?>
</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>