javascript - 网格系统不工作|自举

Question

最近我正在使用 bootstrap 和 restful js 构建一个网站。我希望网站显示这样

但现在我是这样显示的:

内容应该是左右显示的，但是我的版本只显示在左边

菜单.html

<main class="row">
    <div class="col-md-12">
		<h1 class="text-uppercase text-center">Our Menu</h1>
	</div>

	<div class="row" id="appetizers">
		<h1 class="text-uppercase text-center " style="font-size:4rem, text-color:#FF0000">Appetizers</h1>
	</div>
</main>

和我的 menuHelper.js

var HTMLAppetizerStart = '<div class = "appetizer-entry row"></div>'
var HTMLAppetizerFoodName = '<h3 class="col-md-2">——</h3><h3 class="col-md-10 text-uppercase" style="letter-spacing:0.1em">%data%</h3>'
var HTMLAppetizerFoodPrice ='<p class="col-md-2" style="font-weight:700;letter-spacing:0.14em">%data%</p>'                              

var HTMLAppetizerFoodMaterial ='<p class="col-md-10">%data%</p>'              
                            

开胃入门类我设置的宽度是50%

有什么建议吗？

Answer 1

这是您的问题示例。检查一次任何分辨率它会自动调整。

.header h1{
color:#f69c55;
  text-align:center;
}
.col-bd-8 h5{
  color:#333;
  vertical-align:top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-md-12 header">
  <h1>Appeitzers</h1>
  </div>
  </div>
  <div class="row">
    <div class="col-sm-6" >
    <div class="row">
    <div class="col-sm-4" >$7.95</div>
    <div class="col-sm-8" ><h5>SUNOMONOCOMBINATION</h5></div>
    </div>
    </div>
    <div class="col-sm-6">
    <div class="row">
    <div class="col-sm-4">$7.95</div>
    <div class="col-sm-8" ><h5>SUNOMONOCOMBINATION</h5></div>
    </div>
    </div>
    </div>
  <div class="row">
    <div class="col-sm-6" >
    <div class="row">
    <div class="col-sm-4" >$7.95</div>
    <div class="col-sm-8" ><h5>SUNOMONOCOMBINATION</h5></div>
    </div>
    </div>
    <div class="col-sm-6">
    <div class="row">
    <div class="col-sm-4">$7.95</div>
    <div class="col-sm-8" ><h5>SUNOMONOCOMBINATION</h5></div>
    </div>
    </div>
    </div>
</div>