时间戳

首页 > 解决方案 > 想要内容以父级为中心，但要灵活包装

html - 想要内容以父级为中心，但要灵活包装

问题描述

我有以下标记（使用 Bootstrap 4）：

.resource{
  border:1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="resource">
  <div class="container">
    <div class="row justify-content-center">
      <div class="wrapper d-flex flex-wrap justify-content-center">
        <div class="card col-5">
          <p>test1</p>
        </div>
        <div class="card col-5">
            <p>test1</p>
          </div>
        <div class="card col-5">
          <p>test1</p>
        </div>
      </div>
    </div>
  </div>
</div>

我希望卡片左对齐而不是居中。我可以通过justify-content-center从 中删除来实现这一点.wrapper，但随后.wrapper不再居中.container。

我怎样才能实现两者，使.wrapper居中.container并使.card左对齐？

标签： htmlcssbootstrap-4

解决方案

你是什​​么意思？删除justify-content-center不会影响.wrapperin的位置.container > .row。

包装纸仍然居中，卡片从左对齐。

但是如果要制作 2 列网格，则需要使用col-6而不是，因为 Bootstrap 中的网格系统是以 12 为底而不是以 10 为底。col-5

.resource{
  border:1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="resource">
  <div class="container">
    <div class="row justify-content-center">
      <!-- removed "justify-content-center" -->
      <div class="wrapper d-flex flex-wrap">
        <!-- changed from "col-5" to "col-6" -->
        <div class="card col-6">
          <p>test1</p>
        </div>
        <div class="card col-6">
            <p>test1</p>
          </div>
        <div class="card col-6">
          <p>test1</p>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读