Fiddle

Question

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

<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添加一个border-bottom和padding，这些没有显示，例如我的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添加到row-fluid

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>

边境和边界填充没有显示/工作在引导程序中的.row-fluid类？

2 个答案:

Fiddle