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

Question

我觉得这应该很容易，但我试图让我的 .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>

Answer 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>

Answer 2

您应该为此编辑代码，使第二行有两列。

<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>

Answer 3

您可以将 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>

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

Bootstrap 4 row & column stacking vertically instead of horizontally

html

bootstrap-4

bootstrap-grid