Question

最近我正在建立一个使用bootstrap＆amp; amp;宁静的。我希望网站显示这样

但现在我显示如下：

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

menu.html

＆＃13;

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

＆＃13;

和我的menuHelper.js

＆＃13;

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

＆＃13;

开胃菜入门课我设定宽度为50％

有什么建议吗？

Answer 1

这是你的问题的例子。检查一次任何分辨率，它将自动调整。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

虽然我没有完全获取您的代码，但我想，您应该用以下内容替换var HTMLAppetizerStart值：

var HTMLAppetizerStart = '<div class = "appetizer-entry col-md-6"></div>';

Answer 3

您需要在container周围包裹row以确保网格有效 - <div class="container">以下内容应该有效。 See more details here

<div class="container">
   <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>
</div>

Answer 4

每行使用的列太大。网格系统作为12列=一行。

如果您希望它们彼此相邻，您可以将价格放入col-md-3并将菜肴放入col md-3中，它将适合每行2个菜单项，而不是一个。你有一个col-md-2（占用2个单位）的价格和col-md-10（占用10个）的菜名，总数加起来整整一行（12个单位）。

如果您希望它们以不同的方式居中......您可以为列添加偏移量。这有点像您添加空白列以使您的行显示不同。 .date

网格系统不工作|引导

4 个答案: