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

如何使用jumbotron引导程序在1行中制作5列？

1 个答案: