微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

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

代码如下：

<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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot