无法在同一行上获取内容

时间:2016-03-05 21:51:24

标签: html css

我一直在处理这个菜单,我无法将我的菜单部分显示在同一行中。到目前为止,我一直在讨论如何在bootstrap的网站下嵌套行。任何帮助表示赞赏!提前致谢!这就是我到目前为止所做的:

<div class="row">    
        <div class="menu container-fluid">   
            <div class="row">
                <div class="dropdownn col-xs-12 col-md-6">
                    <button class="btn dropdown-toggle" type="button" id="espressoDrinks" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Espresso Drinks
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="espressoDrinks">
                        <ul>
                            <li>Espresso</li>
                                <p>2 oz. 4 oz. or 6 oz. of the finest pure espresso</p>
                            <li>Americano</li>
                                <p>Fresh brewed  espresso with hot water</p>
                            <li>Macchiato</li>
                                <p>Espresso with a dallop of foam</p>
                            <li>Cappuccino</li>
                             <p>Espresso with steamed milk, topped with a crown of foam</p>
                        </ul>
                    </ul>    
                </div>
            </div>    
              
           <!-- </div>  -->
            <div class="row">   
                <div class="dropdown col-xs-12 col-md-6">
                    <button class="btn dropdown-toggle" type="button" id="blendedEspresso" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Blended Espresso Shakes
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="blendedEspresso">    
                        <ul>
                            <li>Blended Bliss</li>
                                <p>Espresso, chocolate and lowfat ice milk blended into a refreshing shake, topped with whipped cream. Delicious!</p>
                            <li>Java Chill</li>
                                <p>Brewed espresso blended with lowfat ice milk, a splash of a flavor of your choosing, and topped with whipped cream</p>
                            <li> White Mocha Chill</li>
                                <p>Blended Ghirardelli white chocolate mocha capped with whipped cream</p>
                            <li>Malty-Malt</li>
                                <p>Blended chocolate mocha with malted milk and topped with whipped cream</p>
                            <li>Minty-Mint</li>
                                <p>Blended mocha spun with a whole peppermint patty and topped with cream</p>
                        </ul>   
                  </ul>
                </div> 
            </div>
        </div>
    </div>

<!-- begin snippet: js hide: false -->

1 个答案:

答案 0 :(得分:0)

据我所知,.row类用于组织嵌套和/或.col-xxx类。因此,您的所有.row必须放在一个.container中 然后,如果要在.rows中组织内容,则必须将内容放在.col-xxx中。

<div class="container">
  <div class="row">
    <div class=".col-md-6"></div><div class=".col-md-6"></div>
  </div>
 <div class="row">
   <div class=".col-md-6"></div><div class=".col-md-6"></div>
 </div>
</div>