如何使用 jumbotron bootstrap 在 1 行中制作 5 列？

Question

我从这里得到参考：https://bootstrap-vue.js.org/docs/components/jumbotron/

我的脚本是这样的：

<b-row>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
</b-row>

如果脚本执行，1 行只有 2 列。是否应该存在 5 列

我可以设置 jumbroton 使 1 行有 5 列吗？

Answer 1

将所有内容保持在一条线上

.row {
 flex-wrap: nowrap;
}

.col {
 min-width: 0;
}