html - 为什么一行堆叠在一列中

Question

我在我的网站上使用了 bootstrap，简单地说，col-md-12 中包含两列，它们是 col-md-6，它们不应该折叠，因为有足够的空间，为什么会这样？

    <div class="container-fluid" style="margin: 0">
    <div class="row">
    <div class="col-md-12">
  <div class="col-md-6 ">
    <div class="col-sm-12">
    <img  class="centering newReq" src="add-512.png"  height="132" width="142">
    </div>
    <div class="col-sm-12">
    <button type="button" class="btn btn-warning centering btnAdjust">New Request</button>
    </div>
  </div>
  <div class="col-md-6 ">
    <div class="col-sm-12">
    <img  class="centering newReq" src="contact.png" height="132" width="142">
    </div>
    <div class="col-sm-12">
    <button type="button" class="btn btn-warning centering btnAdjust">My request</button>
    </div>
  </div>
  </div>
</div>
</div>

Answer 1

只需删除 col-md-12，因为每一行都包含每一列。可选地尝试使用img-responsive 类，而不是为图像设置宽度和高度。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="margin: 0">
    <div class="row">
        <div class="col-md-6 ">
            <div class="col-sm-12">
                <img class="centering newReq img-responsive" src="https://via.placeholder.com/150" height="132" width="142">
            </div>
            <div class="col-sm-12">
                <button type="button" class="btn btn-warning centering btnAdjust">New Request</button>
            </div>
        </div>
        <div class="col-md-6 ">
            <div class="col-sm-12">
                <img class="centering newReq img-responsive" src="https://via.placeholder.com/150" height="132" width="142">
            </div>
            <div class="col-sm-12">
                <button type="button" class="btn btn-warning centering btnAdjust">My request</button>
            </div>
        </div>
    </div>
</div>