javascript - 如何用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 类是 Logo 部分。帮助

Answer 1

你需要调整你的结构。您必须使用 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>