grid system not working | bootstrap

Question

recently i am building a website using bootstrap & restful js. And i expect the website show like this

but now i shown like this:

the content should be shown both left and right, but my version only shows on the left

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

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

the appetizer-entry class i set the width is 50%

any suggestions?

Answer 1

This Is Example Of Your Question . Check Once Any Resolution It Will Be Automatically Adjusted .

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

Answer 2

尽管我没有完全得到您的代码，但是我认为您应该用以下代码替换var HTMLAppetizerStart值：

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

Answer 3

You need to wrap a container around the row to ensure the grid works - <div class="container"> The below should work. 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

You are using too large a column for each row. The grid system works as 12 columns = one row.

If you want them to sit next to each other, you can put the price into a col-md-3 and the dish into a col md-3, and it will fit 2 menu items per line, instead of one. You have the price in a col-md-2 (which takes up 2 units) and the name of the dish in a col-md-10(which takes up 10) the total adds up to a whole row (12 units).

If you want them to center differently..you can add offset to your columns. This is kinda like you are adding blank columns to make your rows appear differently. http://getbootstrap.com/css/#grid-offsetting