时间戳

首页 > 解决方案 > HTML 有一个元素对引导断点做出反应

bootstrap-4 - HTML 有一个元素对引导断点做出反应

问题描述

下面的 boostrap 代码的工作方式与我希望它在不同的屏幕上完全一样！

基本上，当它是一个大屏幕时，我希望 3 个项目在一行中，而当它是一个较小的屏幕时，我希望每个项目在它自己的行上，并且每个项目从头到尾。

a href（耶！）但是，当我用标签替换警报类时，功能会中断（见下文）。使按钮按我想要的方式执行的最佳方法是什么？

作品

<div class='row'>
    <div class='col-sm-12 col-lg-4'>
        <div class='alert btn-primary' >primary alert</div>
    </div>
    <div class='col-sm-12 col-lg-4'>
        <div class='alert btn-primary'>primary alert</div>
    </div>
    <div class='col-sm-12 col-lg-4'>
        <div class='alert btn-primary' >primary alert</div>
    </div>
</div>

不工作

<div class='row'>
    <div class='col-sm-12 col-lg-4'>
        <a href="/" class="alert btn-primary">Home</a>
    </div>
    <div class='col-sm-12 col-lg-4'>
        <a href="/" class="alert btn-primary">Home</a>
    </div>
    <div class='col-sm-12 col-lg-4'>
        <a href="/" class="alert btn-primary">Home</a>
    </div>
</div>

标签： bootstrap-4breakpoints

解决方案

我认为重要的是要知道你想如何构建你的元素：我真的不知道你在做什么，但我猜如下：

  • 你想要一个网格结构（class="row"& class="col-*"）

  • 您需要链接一些元素( <a></a>)

  • 这些元素是按钮 ( <button></button>)

  • 您希望这些按钮占据父容器的整个宽度 ( class="w-100")

在计算了这些约束之后，我们最终得到了以下代码，这与您最初编写的非常相似（耶！）：

<div class='row'>
    <div class='col-sm-12 col-lg-4'>
        <a href="/">
          <button class="alert btn-primary w-100">Home</button>
      </a>
    </div>
    <div class='col-sm-12 col-lg-4'>
        <a href="/">
          <button class="alert btn-primary w-100">Home</button>
      </a>
    </div>
    <div class='col-sm-12 col-lg-4'>
        <a href="/">
          <button class="alert btn-primary w-100">Home</button>
      </a>
    </div>
</div>

推荐阅读