时间戳

首页 > 解决方案 > 为什么一行在列中堆叠

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

问题描述

我的网站使用了引导程序，简单地说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>

标签： htmlcsstwitter-bootstrap-3

解决方案

只需删除，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>

推荐阅读