css - 如何在 twitter-bootstrap3 的 container-fluid 中获得圆 Angular

Question

我想将 container-fluid 中具有不同颜色的两行连接在一起，并为整个容器使用圆 Angular 。我试图将 border-radius 参数的值更改为 10px，但这不起作用。有没有办法将容器流体类更新为圆 Angular ？

<div class="container-fluid" style="border-radius: 10px">
    <div class="row bg-warning h4">
        ...
    </div>
    <div class="row bg-info">
        ...
    </div>
</div>

Answer 1

试试这个:

移除加入容器的h4类

CSS:

        .top {
            border-top-left-radius:50px;
            border-top-right-radius:50px;
        }
        .bottom {
            border-bottom-left-radius:50px;
            border-bottom-right-radius:50px;
        }

.bg-warning{
    background-color:red;    
}
.bg-info{
    background-color:yellow; 
    }

HTML:

 <div style="height:100px" class="row top bg-warning">

</div>
<div style="height:100px"  class="row bottom bg-info">
    ...
</div>

DEMO