html - Bootstrap 列居中

Question

使用 bootstrap 构建餐厅菜单，我有两列 COL-SM-6，其中包含菜单项。我很难弄清楚如何将两列居中，同时保持内容左对齐。我试过偏移量并只使用剩余边距，但这会扰乱 Bootstrap 的响应能力

  <div class="container" id="antipasti">
            <div class="d-flex flex-column">
              <div class="header-text text-center">
                <h3>Antipasti</h3>
                <hr>
              </div>
           </div>[restaurant image][1]
        </div>
        <div class="row" id="items">
            <div class="col-sm-6">
                <p>ASPARAGI Grigliati & Fritti<br><span class="info">Ravanello, Aglio & Formaggio di Capra</span></p>
                <p>LOBSTER Caponata<br><span class="info">Artichokes alla Giudia & Coral (~$10pp)</span></p>
                <p>CARNE CRUDA<br> <span class="info">Parmigiano, Zafferano & Croccante di Riso (~$10pp)</span></p>
            </div>
            <div class="col-sm-6">
                <p>VITELLO TONNATO<br><span class="info">Lemon Basil, Capers & Colatura Vinaigrette</span></p>
                <p>Soft Herbs & LETTUCES<br><span class="info">Truffled Dressing</span></p>
                </div>
        </div>

Answer 1

您没有正确关闭标签。容器在行前关闭。所以，行在容器之外。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container" id="antipasti">
  <div class="d-flex flex-column">
    <div class="header-text text-center">
      <h3>Antipasti</h3>
      <hr>
    </div>
  </div>[restaurant image][1]
  <div class="row" id="items">
    <div class="col-sm-6">
      <p>ASPARAGI Grigliati & Fritti<br><span class="info">Ravanello, Aglio & Formaggio di Capra</span></p>
      <p>LOBSTER Caponata<br><span class="info">Artichokes alla Giudia & Coral (~$10pp)</span></p>
      <p>CARNE CRUDA<br> <span class="info">Parmigiano, Zafferano & Croccante di Riso (~$10pp)</span></p>
    </div>
    <div class="col-sm-6">
      <p>VITELLO TONNATO<br><span class="info">Lemon Basil, Capers & Colatura Vinaigrette</span></p>
      <p>Soft Herbs & LETTUCES<br><span class="info">Truffled Dressing</span></p>
    </div>
  </div>

</div>

---

根据 bootstrap 的惯例，您应该使用新的 row 并为标题添加 col,col-12。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container" id="antipasti">
  <div class="row">
    <div class="col d-flex flex-column">
      <div class="header-text text-center">
        <h3>Antipasti</h3>
        <hr>
      </div>
    </div>
  </div>
  <div class="row" id="items">
    <div class="col-sm-6">
      <p>ASPARAGI Grigliati & Fritti<br><span class="info">Ravanello, Aglio & Formaggio di Capra</span></p>
      <p>LOBSTER Caponata<br><span class="info">Artichokes alla Giudia & Coral (~$10pp)</span></p>
      <p>CARNE CRUDA<br> <span class="info">Parmigiano, Zafferano & Croccante di Riso (~$10pp)</span></p>
    </div>
    <div class="col-sm-6">
      <p>VITELLO TONNATO<br><span class="info">Lemon Basil, Capers & Colatura Vinaigrette</span></p>
      <p>Soft Herbs & LETTUCES<br><span class="info">Truffled Dressing</span></p>
    </div>
  </div>

</div>