如何用bootstrap容器类实现小技巧？

Question

这是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 类是徽标部分。帮助

Answer 1

您需要调整结构。您必须使用container-fluid（全宽）并在容器内使用row，如下所示：

＆＃13;

＆＃13;

.bg {
  background: red;
  height: 60px;
  border-radius:0 50px 50px 0;
}
.content {
 border:1px solid;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试: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>

Answer 3

删除容器类以获得端到端结果，并且最好使用行类

.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>