自舉嵌套列

Question

我正在嘗試重新創建this，並且似乎無法使價格排隊。我相信我應該嵌套列，但似乎無法弄清楚。它目前有this。提前致謝！

.special-1 { 
 
    color: black; 
 
    float: left; 
 
} 
 
.special-2 { 
 
    float: right; 
 
} 
 
.center { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row special-1"> 
 
\t \t \t <div class="col-sm-8"> 
 
\t \t \t \t \t <h3 class="center">Lunch Special</h3> 
 
\t \t \t \t \t <p class="center">11:00am - 3:00pm<br>No Soup for Take Out Orders<br>Served with Pork Fried Rice, Spring Roll, Egg Flower Soup, or Hot Sour Soup</p> 
 
\t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t <p>xxx $x.xx<br>xxx $x.xx<br>xxx $x.xx<br>xxx $x.xx</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t <p>xxx $x.xx<br>xxx $x.xx<br>xxx $x.xx<br>xxx $x.xx</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="row special-2"> 
 
\t \t \t <div class="col-sm-8"> 
 
\t \t \t \t \t <h3 class="center">Dinner Special</h3> 
 
\t \t \t \t \t <p class="center">3:00pm - Closing<br>No Soup for Take Out Orders<br></p> 
 
\t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t <p>xxx $x.xx<br>xxx $x.xx<br>xxx $x.xx<br>xxx $x.xx</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col-sm-6"> 
 
\t \t \t \t \t \t \t <p>xxx $x.xx<br>xxx $x.xx<br>xxx $x.xx<br>xxx $x.xx</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

您還沒有實際嵌套的任何東西。

當你需要這些一起工作時，你有行/列/行/列END行/列/行/列END，而不是完全分開。

查看FullPage的工作示例和Doc Nested Columns。

.special { 
 
    background: lightblue; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container special"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 

 
     <h3 class="text-center">Lunch Special</h3> 
 
     <p class="text-center">11:00am - 3:00pm 
 
     <br>No Soup for Take Out Orders 
 
     <br>Served with Pork Fried Rice, Spring Roll, Egg Flower Soup, or Hot Sour Soup</p> 
 

 
     <div class="row"> 
 
     <div class="col-sm-6"> 
 
      <p>xxx $x.xx 
 
      <br>xxx $x.xx 
 
      <br>xxx $x.xx 
 
      <br>xxx $x.xx</p> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
      <p>xxx $x.xx 
 
      <br>xxx $x.xx 
 
      <br>xxx $x.xx 
 
      <br>xxx $x.xx</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-6"> 
 
     <h3 class="text-center">Dinner Special</h3> 
 
     <p class="text-center">3:00pm - Closing 
 
     <br>No Soup for Take Out Orders 
 
     <br> 
 
     <br> 
 
     </p> 
 

 
     <div class="row"> 
 
     <div class="col-sm-6"> 
 
      <p>xxx $x.xx 
 
      <br>xxx $x.xx 
 
      <br>xxx $x.xx 
 
      <br>xxx $x.xx</p> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
      <p>xxx $x.xx 
 
      <br>xxx $x.xx 
 
      <br>xxx $x.xx 
 
      <br>xxx $x.xx</p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>