HTML具有A元素对引导程序断点作出反应

Question

下面的boostrap代码的工作原理与我希望在不同屏幕上使用的代码完全一样！

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

（是！）但是，当我将警报类替换为a href标记时，功能将中断（请参见下文）。使按钮像我想要的那样执行的最佳方法是什么？

Works

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

Answer 1

我认为了解您要如何结构您的元素很重要：我真的不知道您要做什么，但是我想以下内容：

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

• 您需要链接一些elements（<a></a>）

• 那些element是按钮（<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>