0

ブートストラップを使用してレストランのメニューを作成すると、メニューの項目を含む 2 つの列 COL-SM-6 があります。2 つの列を中央に配置するだけでなく、コンテンツを左揃えにする方法を理解するのに苦労しています。私はオフセットを試してみましたが、マージンを残して使用しましたが、それはブートストラップの応答性を台無しにしています

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

1 に答える 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>

ブートストラップの規則に従って、 new を使用し、ヘッダーに,rowを追加する必要があります。colcol-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>

于 2018-06-04T14:44:48.597 に答える