Bootstrap 4行和列垂直堆叠而不是水平堆叠答案

【问题标题】：Bootstrap 4 row & column stacking vertically instead of horizontallyBootstrap 4行和列垂直堆叠而不是水平堆叠
【发布时间】：2017-12-20 18:06:24
【问题描述】：

我觉得这应该很容易，但我试图让我的 .temp 和 .city div 并排放置，但它们是垂直堆叠的。

我尝试过更改列的大小，但它们总是堆叠在一起。有什么想法吗？

          <div class="col-lg" id="col2">
            <div class="row">
              <div class="col-lg">
                <div class="wind"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg" id="col3">
                <div class="temp"></div>
                <div class="city"></div>
              </div>
            </div>
          </div>

【问题讨论】：

标签： html bootstrap-4 bootstrap-grid

【解决方案1】：

您可以将 temp div 和 city div 包装到 2 个不同的列中。检查这个Bootstrap4 Example。

.wind,
.temp,
.city {
  height: 50px;
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-sm" id="col2">
  <div class="row">
    <div class="col-lg">
      <div class="wind"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg" id="col3">
      <div class="temp"></div>
    </div>
    <div class="col-lg" id="col3">
      <div class="city"></div>
    </div>
  </div>

【讨论】：

我希望有两行：第一行有 .wind div，第二行有 .temp 和 .city，并排。这有意义吗？
哦，我看到 esther kay 添加了答案，是的，同样的解决方案。

【解决方案2】：

您可以将您的 html 代码重新排列为这种格式。

        <div class="row">    
            <div class="col-lg" id="col2">
                <div class="col-lg">
                    <div class="wind"></div>
                </div>
            </div>            
            <div class="col-lg" id="col3">
                <div class="temp"></div>
                <div class="city"></div>
            </div>
        </div>

【讨论】：

【解决方案3】：

你应该编辑你的代码，使第二行有两列。

<div class="col-lg" id="col2">
        <div class="row">
          <div class="col-lg">
            <div class="wind"></div>
          </div>
        </div>
        <div class="row">
            <div class="col temp"></div>
            <div class="col city"></div>
        </div>
      </div>

【讨论】：