HTML элемент реагирует на bootstrap контрольные точки - PullRequest
Новая
       7

HTML элемент реагирует на bootstrap контрольные точки

0 голосов
/ 01 апреля 2020

Приведенный ниже код 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>

1 Ответ

0 голосов
/ 02 апреля 2020

Я думаю, важно знать, как вы хотите структурировать ваши элементы: я действительно не знаю, для чего вы это делаете, но я предполагаю следующее:

  • Требуется структура сетки (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>
...