如何创建一个上方一列下方两列的 bootstrap 网格？

Question

我的问题是：如何转换一个 bootstrap 网格，在桌面版上有三列，在移动版上有上一列和下两列？

我已经尝试了很多东西都没有成功...

Answer 1

你可以试试这个：

<div class="row">
   <div class="col-md-4 col-sm-12 col-xs-12"></div>
   <div class="col-md-4 col-sm-6 col-xs-6"></div>
   <div class="col-md-4 col-sm-6 col-xs-6"></div>
</div>

阅读更多关于 Bootstrap grid

Answer 2

移动屏幕变化 col-6 最后两个 div 和第一个 col-12， col-xs-* 已从 Bootstrap 4 中删除，取而代之的是 col-*

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-4 text-center">
      <p>1</p>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <p>2</p>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <p>3</p>
    </div>
  </div>
</div>

Answer 3

这是给 bootstrap 4

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-12 col-md-4">Box 1</div>
    <div class="col-6 col-sm-6 col-md-4">Box 2</div>
    <div class="col-6 col-sm-6 col-md-4">Box 3</div>
  </div>
</div>

Answer 4

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-4">Box1</div>
        <div class="col-xs-6 col-sm-4 col-md-4">Box2</div>
        <div class="col-xs-6 col-sm-4 col-md-4">Box3</div>
    </div>
</div>

解释:

Bootstrap 一页最多允许 12 列。

这里对于移动设备 phone 等 XS 设备，button/widget 应该占据所有 12 个网格，因此每行只有 1 个 button/widget，因此 col-xs-12。

由于桌面可以是中型设备，3 widget/button 应该跨越整个页面，因此值 col-md-4.

希望对您有所帮助。

Answer 5

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 </head>
 <body>
  

<div class="container-fluid">
 <div class="row">
    <div class="col-12 col-sm-4 text-center">
  <h1>1</h1>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <h1>2</h1>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <h1>3</h1>
    </div>
  </div>
</div>



 </body>
</html>

Read More about bootstrap 4 grid system

bootstrap 4 grid system

如何创建一个上方一列下方两列的 bootstrap 网格？

How create a bootstrap grid with one column above and two below?

html

css

frontend

web-frontend

bootstrap-4