首页 文章

Bootstrap col居中

提问于
浏览 次
0

使用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>
html css twitter-bootstrap

1 回答

  • 0

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

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

    根据引导程序的约定，您应该使用新的 row 并为 Headers 添加 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>
    回复于

相关问题