Grid Bootstrap容器一直向右溢出，我不知道为什么

ql3eal8s 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(1)|浏览(170)

我希望在网格容器的左边和右边都有一个边距，这样它就不会接触到网页的边框-但是即使左边的边距显示得很好，右边的边距不仅没有显示，而且容器会向右溢出！！
我需要的容器是集中在页面的中间，其内容仍然在“流体”网格模式和空间在左边和右边分隔容器从页面。

.container-fluid {
  margin: 1vw 2vw;
  padding: 0;
  background: pink;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<h2>XPTO Album</h2>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 ml-12">
      <img src="https://via.placeholder.com/800x250" height="250px" class="card-img-top object-fit-cover" alt="ufmg">
    </div>
    <div class="col-sm-12 col-md-6 col-lg-8 mr-12">
      <h5>Description</h5>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere omnis suscipit, sequi illo eveniet facilis. Cum numquam, veniam labore, et officiis, recusandae delectus modi illum fugit perferendis rerum! Ipsum, earum.</p>
      <div class="container">
        <div class="row">
          <div class="col-8">
            <h5>Location</h5>
            <p>Avenida Presidente Antônio Carlos, 6627 - Pampulha, Belo Horizonte - MG, 31270-010</p>
          </div>
          <div class="col-4">
            <h5>Register Date</h5>
            <p>09/24/2023</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

twitter-bootstrap

来源：https://stackoverflow.com/questions/77175158/grid-bootstrap-container-keeps-overflowing-to-the-right-and-i-cant-figure-out-w

1条答案

按热度按时间

nwsw7zdq1#

将container-fluid Package 在另一个div中，并将间距作为填充应用到 Package 器。

<div style="padding: 1vw 2vw">
   <div class="container-fluid">
      <!-- stuff -->
   </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<h2>XPTO Album</h2>
<div style="padding: 1vw 2vw">
  <div class="container-fluid bg-warning">
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg-4 ml-12">
        <img src="https://via.placeholder.com/800x250" height="250px" class="card-img-top object-fit-cover" alt="ufmg">
      </div>
      <div class="col-sm-12 col-md-6 col-lg-8 mr-12">
        <h5>Description</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere omnis suscipit, sequi illo eveniet facilis. Cum numquam, veniam labore, et officiis, recusandae delectus modi illum fugit perferendis rerum! Ipsum, earum.</p>
        <div class="container">
          <div class="row">
            <div class="col-8">
              <h5>Location</h5>
              <p>Avenida Presidente Antônio Carlos, 6627 - Pampulha, Belo Horizonte - MG, 31270-010</p>
            </div>
            <div class="col-4">
              <h5>Register Date</h5>
              <p>09/24/2023</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

展开查看全部

赞(0）回复(0）举报 2023-09-28

我来回答

Grid Bootstrap容器一直向右溢出，我不知道为什么

1条答案

相关问题

热门标签

最新问答