如何设置 Bootstrap 使其按预期工作？

编程问答 2022-05-27

问题描述

代码如下：

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

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

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

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

我不知道为什么带有“这不正常”的屏幕截图看起来如此。

我该如何解决？

更新：

除了屏幕宽度 

<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,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,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>

解决方法

您已将 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>

截图：

screenshot 1204 px wide window

screenshot 1004 px wide window

screenshot 800 px wide window

screenshot 585 px wide window

bootstrap-4bootstrap-vuepugvue.js