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

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

Answer 2

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

Bootstrap 4 row＆amp;列垂直堆叠而不是水平堆叠

3 个答案: