如何设置 Bootstrap 以按预期工作？

Question

代码如下所示：

<template lang="pug">
b-container
  b-row
    b-col
      h1
        strong LICOTA® — ПРОФЕССИОНАЛЬНЫЙ ИНСТРУМЕНТ ВЫСШЕГО КЛАССА ДЛЯ АВТОСЕРВИСОВ И ПРОМЫШЛЕННЫХ ПРЕДПРИЯТИЙ
  b-row.mt-1
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-card(img-src='https://licota.ru/home_banners/info-item-1.png' img-alt='Image' img-top tag='article' class='info-block__card--no-border h-100')
        b-card-text Имеет TUV сертификат ISO 9001:2008. Соответствует требованиям GS, CE, EAC и превышает нормы DIN и ГОСТ
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-card(img-src='https://licota.ru/home_banners/info-item-2.png' img-alt='Image' img-top tag='article' class='info-block__card--no-border h-100')
        b-card-text Один из ведущих производителей инструмента в мире с трехуровневым контролем качества
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-card(img-src='https://licota.ru/home_banners/info-item-3.png' img-alt='Image' img-top tag='article' class='info-block__card--no-border h-100')
        b-card-text Инструмент адаптирован к российским условиям и имеет пожизненную гарантию на брак изготовителя
  b-row.mt-1
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-card(img-src='https://licota.ru/home_banners/info-item-4.png' img-alt='Image' img-top tag='article' class='info-block__card--no-border h-100')
        b-card-text Наши клиенты из автомобильного сегмента, которые выбрали Licota®
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-card(img-src='https://licota.ru/home_banners/info-item-5.png' img-alt='Image' img-top tag='article' class='info-block__card--no-border h-100')
        b-card-text Эти промышленные предприятия уверенно работают с Licota®
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-card(img-src='https://licota.ru/home_banners/info-item-6.png' img-alt='Image' img-top tag='article' class='info-block__card--no-border h-100')
        b-card-text Дилеры Licota® по всей России, от Калининграда до Камчатки
  b-row.mt-1
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-button(class='info-block__button' block size='lg') О ПРОИЗВОДИТЕЛЕ
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-button(class='info-block__middle-button' block size='lg') КАТАЛОГ ТОВАРОВ
    b-col(class='col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column')
      b-button(class='info-block__button' block size='lg') ГДЕ КУПИТЬ?
</template>

<script lang="ts">
import Vue from 'vue'
import { Data } from 'types/header/nav/catalog'
import testData from '../data/testData.json'

export default Vue.extend({
  data: (): Data => ({
    catalog: [],
  }),
  mounted(): void {
    this.catalog = testData.catalog
  },
})
</script>

<style lang="sass">
.info-block
  font-size: 16px
  text-align: center
.info-block__column
  padding: 10px
.info-block__card--no-border
  border: none
.info-block__button
  background-color: #eee
  background-image: -webkit-linear-gradient(bottom, #ccc 0%, #eee 100%)
  border: 1px solid #cccccc
  color: black
  font-size: 18px
  font-weight: bold
  line-height: 2
  text-shadow: 0.5px 0.866px 0 white
.info-block__middle-button
  background-color: #007dfa
  background-image: -webkit-linear-gradient(bottom, #00468c 0%, #007dfa 100%)
  border: 1px solid rgb(0, 70, 140)
  color: white
  font-size: 18px
  font-weight: bold
  line-height: 2
  text-shadow: 0.5px 0.866px 0 rgb(0, 30, 60)
</style>

如您所见，这是我们使用“pug”模板引擎和BootstrapVue 组件库的Vue.js 应用程序。我正在尝试使用 b-col 和 Bootstrap 的 col-xs-、col-sm- 等使应用响应.

不同屏幕宽度的主页面如下：

我不确定为什么带有“不正常”的屏幕截图看起来是这样。

我该如何解决？

更新：

除了屏幕宽度 <576px 之外，这段代码工作正常。

<template lang="pug">
  b-container
    b-row
      b-col
        h1
          strong LICOTA® — ПРОФЕССИОНАЛЬНЫЙ ИНСТРУМЕНТ ВЫСШЕГО КЛАССА ДЛЯ АВТОСЕРВИСОВ И ПРОМЫШЛЕННЫХ ПРЕДПРИЯТИЙ
    b-row.mt-1
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-card(img-src='https://licota.ru/home_banners/info-item-1.png' img-alt='Image' img-top tag='article').info-block__card--no-border.h-100
          b-card-text Имеет TUV сертификат ISO 9001:2008. Соответствует требованиям GS, CE, EAC и превышает нормы DIN и ГОСТ
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-card(img-src='https://licota.ru/home_banners/info-item-2.png' img-alt='Image' img-top tag='article').info-block__card--no-border.h-100
          b-card-text Один из ведущих производителей инструмента в мире с трехуровневым контролем качества
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-card(img-src='https://licota.ru/home_banners/info-item-3.png' img-alt='Image' img-top tag='article').info-block__card--no-border.h-100
          b-card-text Инструмент адаптирован к российским условиям и имеет пожизненную гарантию на брак изготовителя
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-card(img-src='https://licota.ru/home_banners/info-item-4.png' img-alt='Image' img-top tag='article').info-block__card--no-border.h-100
          b-card-text Наши клиенты из автомобильного сегмента, которые выбрали Licota®
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-card(img-src='https://licota.ru/home_banners/info-item-5.png' img-alt='Image' img-top tag='article').info-block__card--no-border.h-100
          b-card-text Эти промышленные предприятия уверенно работают с Licota®
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-card(img-src='https://licota.ru/home_banners/info-item-6.png' img-alt='Image' img-top tag='article').info-block__card--no-border.h-100
          b-card-text Дилеры Licota® по всей России, от Калининграда до Камчатки
    b-row.mt-1
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-button.btn.btn-lg.btn-block.info-block__button О ПРОИЗВОДИТЕЛЕ
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-button.btn.btn-lg.btn-block.info-block__middle-button КАТАЛОГ ТОВАРОВ
      b-col.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.info-block__column
        b-button.btn.btn-lg.btn-block.info-block__button ГДЕ КУПИТЬ?
</template>

编译后的 HTML 代码 (BootstrapVue) 如下所示：

<b-container>
    <b-row>
        <b-col>
            <h1><strong>LICOTA® — ПРОФЕССИОНАЛЬНЫЙ ИНСТРУМЕНТ ВЫСШЕГО КЛАССА ДЛЯ АВТОСЕРВИСОВ И ПРОМЫШЛЕННЫХ ПРЕДПРИЯТИЙ</strong></h1>
        </b-col>
    </b-row>
    <b-row class="mt-1">
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-card class="info-block__card--no-border h-100" img-src="https://licota.ru/home_banners/info-item-1.png" img-alt="Image" img-top="img-top" tag="article">
                <b-card-text>Имеет TUV сертификат ISO 9001:2008. Соответствует требованиям GS, CE, EAC и превышает нормы DIN и ГОСТ</b-card-text>
            </b-card>
        </b-col>
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-card class="info-block__card--no-border h-100" img-src="https://licota.ru/home_banners/info-item-2.png" img-alt="Image" img-top="img-top" tag="article">
                <b-card-text>Один из ведущих производителей инструмента в мире с трехуровневым контролем качества</b-card-text>
            </b-card>
        </b-col>
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-card class="info-block__card--no-border h-100" img-src="https://licota.ru/home_banners/info-item-3.png" img-alt="Image" img-top="img-top" tag="article">
                <b-card-text>Инструмент адаптирован к российским условиям и имеет пожизненную гарантию на брак изготовителя</b-card-text>
            </b-card>
        </b-col>
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-card class="info-block__card--no-border h-100" img-src="https://licota.ru/home_banners/info-item-4.png" img-alt="Image" img-top="img-top" tag="article">
                <b-card-text>Наши клиенты из автомобильного сегмента, которые выбрали Licota®</b-card-text>
            </b-card>
        </b-col>
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-card class="info-block__card--no-border h-100" img-src="https://licota.ru/home_banners/info-item-5.png" img-alt="Image" img-top="img-top" tag="article">
                <b-card-text>Эти промышленные предприятия уверенно работают с Licota®</b-card-text>
            </b-card>
        </b-col>
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-card class="info-block__card--no-border h-100" img-src="https://licota.ru/home_banners/info-item-6.png" img-alt="Image" img-top="img-top" tag="article">
                <b-card-text>Дилеры Licota® по всей России, от Калининграда до Камчатки</b-card-text>
            </b-card>
        </b-col>
    </b-row>
    <b-row class="mt-1">
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-button class="btn btn-lg btn-block info-block__button">О ПРОИЗВОДИТЕЛЕ</b-button>
        </b-col>
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-button class="btn btn-lg btn-block info-block__middle-button">КАТАЛОГ ТОВАРОВ</b-button>
        </b-col>
        <b-col class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
            <b-button class="btn btn-lg btn-block info-block__button">ГДЕ КУПИТЬ?</b-button>
        </b-col>
    </b-row>
</b-container>

Answer 1

您已将 6 张卡片分成两行，因此当屏幕对于 3 列卡片来说太窄时，第三张卡片将单独移动到新的一行。

最简单的解决方法：将所有 6 张卡片排成一行。

这是标记的 HTML 版本，已将所有卡片放在一行中：

.info-block {
      font-size: 16px;
      text-align: center;
    }

    .info-block__column {
      padding: 10px;
    }

    .info-block__card--no-border {
      border: none;
    }

    .info-block__button {
      background-color: #eee;
      background-image: -webkit-linear-gradient(bottom, #ccc 0%, #eee 100%);
      border: 1px solid #cccccc;
      color: black;
      font-size: 18px;
      font-weight: bold;
      line-height: 2;
      text-shadow: 0.5px 0.866px 0 white;
    }

    .info-block__middle-button {
      background-color: #007dfa;
      background-image: -webkit-linear-gradient(bottom, #00468c 0%, #007dfa 100%);
      border: 1px solid rgb(0, 70, 140);
      color: white;
      font-size: 18px;
      font-weight: bold;
      line-height: 2;
      text-shadow: 0.5px 0.866px 0 rgb(0, 30, 60);
    }

<!-- bootstrap 4.6.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">

<body class="p-4" style="background-color: #d0d0d0">

  <div class="container">

    <div class="row">
      <div class="col">
        <h1><strong>LICOTA® — ПРОФЕССИОНАЛЬНЫЙ ИНСТРУМЕНТ ВЫСШЕГО КЛАССА ДЛЯ
        АВТОСЕРВИСОВ И ПРОМЫШЛЕННЫХ ПРЕДПРИЯТИЙ</strong></h1>
      </div>
    </div>

    <div class="row mt-1">
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <div class="card info-block__card--no-border h-100">
          <img src="https://licota.ru/home_banners/info-item-1.png" class="card-img-top">
          <div class="card-body">
            <p class="card-text">Имеет TUV сертификат ISO 9001:2008. Соответствует требованиям GS, CE, EAC и превышает нормы DIN и ГОСТ</p>
          </div>
        </div>
      </div>
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <div class="card info-block__card--no-border h-100">
          <img src="https://licota.ru/home_banners/info-item-2.png" class="card-img-top">
          <div class="card-body">
            <p class="card-text">Один из ведущих производителей инструмента в мире с трехуровневым контролем качества</p>
          </div>
        </div>
      </div>
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <div class="card info-block__card--no-border h-100">
          <img src="https://licota.ru/home_banners/info-item-3.png" class="card-img-top">
          <div class="card-body">
            <p class="card-text">Инструмент адаптирован к российским условиям и имеет пожизненную гарантию на брак изготовителя</p>
          </div>
        </div>
      </div>
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <div class="card info-block__card--no-border h-100">
          <img src="https://licota.ru/home_banners/info-item-4.png" class="card-img-top">
          <div class="card-body">
            <p class="card-text">Наши клиенты из автомобильного сегмента, которые выбрали Licota®</p>
          </div>
        </div>
      </div>
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <div class="card info-block__card--no-border h-100">
          <img src="https://licota.ru/home_banners/info-item-5.png" class="card-img-top">
          <div class="card-body">
            <p class="card-text">Эти промышленные предприятия уверенно работают с Licota®</p>
          </div>
        </div>
      </div>
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <div class="card info-block__card--no-border h-100">
          <img src="https://licota.ru/home_banners/info-item-6.png" class="card-img-top">
          <div class="card-body">
            <p class="card-text">Дилеры Licota® по всей России, от Калининграда до Камчатки</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-1">
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <button class="btn btn-lg info-block__button">ПРОИЗВОДИТЕЛЕ</button>
      </div>
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <button class="btn btn-lg info-block__middle-button">КАТАЛОГ ТОВАРОВ</button>
      </div>
      <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 info-block__column">
        <button class="btn btn-lg info-block__button">ГДЕ КУПИТЬ?</button>
      </div>
    </div>
  </div>
</body>

截图：

如何设置 Bootstrap 以按预期工作？

How to setup Bootstrap to work as expected?

vue.js

bootstrap-4

pug

bootstrap-vue