如何使用引导程序创建以下响应式布局？答案

【问题标题】：How to create the following responsive layout with bootstrap?如何使用引导程序创建以下响应式布局？
【发布时间】：2019-12-23 00:42:41
【问题描述】：

我想实现这些：

计算机视图：

平板电脑纵向视图：

手机纵向视图：

目前我有以下代码，其中“home-content”部分将生成 items#1-items#X：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
    <link rel="stylesheet" href="index.css">
    <script src="../_lib/jquery/jquery.min.js"></script>
    <script src="../_lib/jquery/jquery.fittext.js"></script>
    <script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="index.js"></script>
    <title></title>
</head>
<body>
<script>
    init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="home-noti">
                <div class="news-noti">
                    <div class="news-panel panel">
                        <div class="news-title panel-heading">
                            <h2 class="panel-title">NEWSFLASH!</h2>
                        </div>
                        <div class="news-items-wrapper">
                            <ul id="news-items" class="news-items list-group"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div id="home-content" class="home-content"></div>
        </div>
    </div>
</div>


</body>
</html>

这段代码可以实现“电脑视图”和“平板纵向视图”。我本可以使用 4 个“col-md-3”来做到这一点，但这意味着有时我可能会在同一行上获得带有 2 个项目的 Notifications col，或者在同一行上获得带有 1 个项目的 Notifications col，这不是我想要的.如何在不打破前2个布局的情况下实现“Mobile Portrait view”？

【问题讨论】：

标签： javascript css twitter-bootstrap responsive-design

【解决方案1】：

您可以为此使用嵌套列。

row
  col-*-*
    row
      col-*-*
    row
      col-*-*

查看Docs 并以全屏查看工作示例，然后缩小视口。

/**FOR DEMO PURPOSES ONLY**/

html,
body {
  margin-top: 50px;
  text-align: center;
}
.alert.alert-info {
  height: 100px;
  border-radius: 0;
}
.alert.alert-info-tall {
  height: 340px;
  border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="row">
        <div class="col-sm-12">
          <div class="alert alert-info alert-info-tall">Notifications</div>
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="row">
        <div class="col-sm-4">
          <div class="alert alert-info">1</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">2</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">3</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">4</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">5</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">6</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">7</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">8</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">9</div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

你能解释一下你为什么选择“col-lg-4”和“col-lg-8”吗？我不明白这部分。
这样做的目的是分隔您的列，使它们彼此相邻。您选择的大小基本上是您希望内容分发的方式：如果您希望双方甚至使用 col--6，如果您想要不同的断点，请使用 col-md-。如果您调整这些数字（使它们等于 12：6 与 6、9 与 3 等），您将看到它是如何工作的。
哦，因为你用的是 1:2，我其实打算用 1:3。 col-sm- 部分与选择的 col-md- i hv 一起工作。因为我不明白你为什么将 col-md- 更改为 col-lg-。但如果比例正确，它似乎是一样的。

【解决方案2】：

试着找出Bootstrap Gird Options 和你只需要知道什么时候在哪个屏幕上使用哪个类就可以了。这是工作中的structure 供您参考。

 <div class="row">
  <div class="left-block col-lg-4 col-md-12 col-xs-12">
    Aside Section
  </div>
  <div class="content-block col-lg-8 col-md-12 col-xs-12">
    <div class="row" style="padding:10px;">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

使用这个：

<div class="container">
    <div class="col-md-3 col-sm-12 col-xs-12">
        <div class="col-xs-12 notification">
            <p>Notifications</p>
        </div>
    </div>
    <div class="col-md-9 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 1</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 2</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 3</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 4</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 5</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 6</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 7</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 8</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 9</p>
                </div>
            </div>
        </div>
    </div>
</div>

而且这种风格将有助于获得更好的外观：

.notification {
    background-color:#000;
    height:auto;
    padding-top: 50px;
    padding-bottom:50px;
    margin-bottom:10px;
}
.item {
    background-color:#333;
    height: auto;
    margin-bottom:10px;
}
p {
    color:#ffffff;
}

这里是小提琴：http://jsfiddle.net/xwmmfu0e/

【讨论】：

【解决方案4】：

您需要添加一个 xs 前缀。尝试将 col-xs-6 添加到两个 div。

<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
            ...
</div>

【讨论】：

嗨，这不起作用。无论我如何调整窗口大小，我都会在同一行获得通知列和 3 个项目。