边框和填充在引导程序中未显示/处理 .row-fluid 类？

Question

我正在为我的第一个主要产品使用bootstrap，我过去只是玩过它，现在我的HTML视图中有以下内容（这表示结构，并且是重复的，这只是一个示例，展示了我如何拥有div.row-fluid和2或1个子div）

<div id="menuWrapper" >
    <div class="row-fluid">
        <div class="col-xs-9 menu-detail">
            Vorspeisen
        </div>
        <div class="col-xs-3 selected-orange text-right">
            ab 2.80 €
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-9">
            Hausgemachter Griebenschmalz auf Schrotbrot
            <span class="grey-subtext">Portion mit Spreewald - Gurke</span>
        </div>
        <div class="col-xs-3 text-right">
            3.80 €
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-9">
            Hausgemachter Griebenschmalz auf Harzer Käze
            <span class="grey-subtext">Portion mit Spreewald - Gurke</span>
        </div>
        <div class="col-xs-3 text-right">
            3.80 €
        </div>
    </div>
    <div class="row-fluid menu-header">
        <div class="col-xs-9 menu-detail">
            Hauptspeisen
        </div>
        <div class="col-xs-3 selected-orange text-right">
            ab 12.80 €
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-9">
            Ragu alla Bolognese
            <span class="grey-subtext">mit orginal Parmesan Käse</span>
        </div>
        <div class="col-xs-3 text-right">
            7.80 €
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-9">
            Fish & Chips
            <span class="grey-subtext">mit orginal Mushy-Erbse </span>
        </div>
        <div class="col-xs-3 text-right">
            10.80 €
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row-fluid">
        <div class="col-xs-9">
            Beriner Teller
            <span class="grey-subtext">Bulette mit Kartoffelsalat, hausgemachter Art mit Jogurt-Dressing und original Spreewalk-Gurke</span>
        </div>
        <div class="col-xs-3 text-right">
            9.80 €
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row-fluid">
        <div class="col-xs-9 menu-detail">
            Dessert
        </div>
        <div class="col-xs-3 selected-orange text-right">
            ab 2.90 €
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-9">
            Alt Deutscher Käsekuchen
        </div>
        <div class="col-xs-3 text-right">
            ab 2.90 €
        </div>
    </div>
    <div class="row-fluid">
            <div class="col-xs-9">
                Alt Britisch Käsekuchen
            </div>
            <div class="col-xs-3 text-right">
                ab 2.90 €
            </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-12 text-center menu-close">
            <span class="icon-close"></span>
            Close
        </div>
    </div>
</div>

现在，出于某种原因，我应该尝试在class="row-fluid"div中添加一个边框底部和填充物吗？这些没有显示，例如，我的CSS:中有这样的内容

#menuWrapper .row-fluid {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid black;
}

即使我没有带ID的Div来隔离样式，也不会应用样式。就好像.row-fluid的内容溢出了DIV。如果我想在行上添加边框或填充，我必须将其应用于样式为class="col-xs-*的子div。显然，由于重复或类，我不想这样做。有人知道我做错了什么吗，因为我没有产生这个问题的冲突css（我可以隔离）？也许是我缺乏理解？但是，即使我删除了所有的CSS并只应用上面的CSS，我的视图仍然不能产生我想要的边框和填充？

Answer 1

尝试将overflow:hidden添加到行流体

Fiddle

Css

#menuWrapper .row-fluid {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid black;
  overflow:hidden;
}

Answer 2

为了方便起见，您可以创建自己的样式文件，它必须覆盖现有类的属性，或者创建一个具有必要参数的类

<div class="row-flud your klass">
         <div class="col-xs-9">
             Hausgemachter Griebenschmalz auf Schrotbrot
             <span class="grey-subtext"> Portion mit Spreewald - Gurke </ span>
         </ div>
         <div class="col-xs-3 text-right">
             3.80 €
         </ div>
     </ div>