如何利用引导容器类实现小技巧？
如何利用引导容器类实现小技巧？
提问于 2017-12-28 12:14:19
这是PSD(我想做的事)：
这是HTML：
.bg{
background:red;
height:60px;
}
.container{
max-width:360px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-5 bg">
</div>
</div>Bg类是徽标部分。帮助
回答 3
Stack Overflow用户
发布于 2017-12-28 12:29:28
你需要调整你的结构。您必须使用container-fluid (以达到完全宽度)，并在容器内使用row，如下所示：
.bg {
background: red;
height: 60px;
border-radius:0 50px 50px 0;
}
.content {
border:1px solid;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-5 bg">
</div>
<div class="col-6 content">
the remaining content goes here
</div>
</div>
</div>
Stack Overflow用户
发布于 2017-12-28 12:35:37
您可以尝试使用:before伪选择器，如下所示
.bg {
background: red;
height: 60px;
border-radius: 0 30px 30px 0;
}
.container {
max-width: 360px;
}
.bg:before {
content: "";
position: absolute;
background: red;
top: 0;
bottom: 0;
left: -1000px;
right: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-5 bg">
</div>
</div>
Stack Overflow用户
发布于 2017-12-28 12:17:18
删除容器类以获得端到端的结果，最好使用行类。
.bg{
background:red;
height:60px;
}
.container{
max-width:360px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-5 bg">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48007340
复制相关文章
相似问题
腾讯云开发者
