Bootstrap嵌套列

Question

我试图重新创建this并且似​​乎无法让价格排成一行。我相信我应该嵌入列，但似乎无法弄明白。目前它this。提前谢谢！

＆＃13;

＆＃13;

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

＆＃13;

<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">
			<div class="col-sm-8">
					<h3 class="center">Lunch Special</h3>
					<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>
					<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 class="row special-2">
			<div class="col-sm-8">
					<h3 class="center">Dinner Special</h3>
					<p class="center">3:00pm - Closing<br>No Soup for Take Out Orders<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你实际上没有嵌套任何东西。

当你需要将这些行作为一个一起工作时，你有行/列/行/列END行/列/行/列END，而不是完全分开。

请参阅FullPage和文档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>