Question

使用bootstrap构建餐厅菜单，我有两列COL-SM-6，其中包含菜单项。我很难弄清楚如何使两列居中，同时保持内容左对齐。我已经尝试了偏移，只是使用了保证金，但这是在搞乱引导响应

  <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

您尚未正确关闭代码。容器在排之前关闭。所以，行在容器之外。

＆＃13;

<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>

＆＃13;

根据引导程序约定，您应该使用新的row并为标头添加col，col-12。

＆＃13;

<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>

＆＃13;

Bootstrap col居中

1 个答案: