提问者:小点点

如何在网格系统中划分bootstrap jumbotron


使用bootstrap 4超大型加速器和使用以下外部css文件来定制超大型加速器,

.jumbotron {
    background-image: url("/images/image.jpg"); 
    background-size: cover;
  }

现在需要使用上面的css文件划分出高度和宽度相同的5个等列。那我怎么能这么做?


共1个答案

匿名用户

因此,您希望有一个包含5个巨型机的行。

如果你想要所有它们在同一行,这取决于每一个巨大的宽度,如果它们是100px的宽度,确定它们将在同一行。但如果你使用的是流体巨无霸,它们自然会这样排列:junbotrons fluid

代码也是这样的:

<div class="container">
<div class="row">
  <div class="col">
    <div class="jumbotron jumbotron-fluid" >
      <div class="container">
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="jumbotron jumbotron-fluid" >
      <div class="container">
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="jumbotron jumbotron-fluid" >
      <div class="container">
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="jumbotron jumbotron-fluid" >
      <div class="container">
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="jumbotron jumbotron-fluid" >
      <div class="container">
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
      </div>
    </div>
  </div>
</div>