Проблема с двумя картами, вложенными в радиогруппу - PullRequest
Новая
       1

Проблема с двумя картами, вложенными в радиогруппу

0 голосов
/ 16 октября 2018

Я встроил переключатель в две карты.Чтобы сгруппировать их вместе, я вложил две карты в группу btn.
Это работает очень хорошо, но раскладка дает сбой при небольших размерах дисплея.
При уменьшении до xs два столбца должны заполнить одну строку, ноне бываетВторая карта исчезает, вы не можете прокрутить ее.
Я много пробовал, но не могу заставить ее работать на маленьких экранах.
Когда я опускаю обертку радиогруппы, раскладка работает, но, очевидно, мои переключатели не работают.'t. 

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <!-- Grid row -->
        <div class="row">
          <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <div class="col-12 col-lg-6 col-md-6">
              <div class="card">
                <div class="card-body">
                  <h5 class="mb-4">Card Title 1</h5>
                  <div class="d-flex justify-content-center">
                    <div class="card-circle d-flex justify-content-center align-items-center">
                      <i class="fa fa-users light-blue-text"></i>
                    </div>
                  </div>
                  <p class="grey-text">Paragraph 1.</p>
                  <label id="label1" class="btn btn-secondary active" for="input1">
                                                                    Radio1
                                                                    <input type="radio" id="input1"
                                                                           name="name1"
                                                                           value="val1" checked>
                                                                </label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6 col-md-6 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="mb-4">Card title 2</h5>
                  <div class="d-flex justify-content-center">
                    <div class="card-circle d-flex justify-content-center align-items-center">
                      <i class="fa fa-user light-blue-text"></i>
                    </div>
                  </div>
                  <p class="grey-text">Card paragraph 2.</p>
                  <label id="label2" class="btn btn-secondary" for="radio2">
                                                                    <input type="radio" id="radio2"
                                                                           name="name1"
                                                                           value="val2">
                                                                    Radio 2</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Не работает, но не ломается макет: 

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <!-- Grid row -->
        <div class="row">

          <div class="col-12 col-lg-6 col-md-6">
            <div class="card">
              <div class="card-body">
                <h5 class="mb-4">Card Title 1</h5>
                <div class="d-flex justify-content-center">
                  <div class="card-circle d-flex justify-content-center align-items-center">
                    <i class="fa fa-users light-blue-text"></i>
                  </div>
                </div>
                <p class="grey-text">Paragraph 1.</p>
                <label id="label1" class="btn btn-secondary active" for="newSurgery">
                                                                    Radio1
                                                                    <input type="radio" id="input1"
                                                                           name="name2"
                                                                           value="val1" checked>
                                                                </label>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 col-md-6 mb-lg-0 mb-4">
            <div class="card">
              <div class="card-body">
                <h5 class="mb-4">Card title 2</h5>
                <div class="d-flex justify-content-center">
                  <div class="card-circle d-flex justify-content-center align-items-center">
                    <i class="fa fa-user light-blue-text"></i>
                  </div>
                </div>
                <p class="grey-text">Card paragraph 2.</p>
                <label id="label2" class="btn btn-secondary" for="radio2">
                                                                    <input type="radio" id="radio2"
                                                                           name="name2"
                                                                           value="val2">
                                                                    Radio 2</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Я не думаю, что переключатели имеют какое-либо отношение к окружающим их элементам HTML.Вам просто нужно иметь одинаковое имя для них: 

<input type="radio" id="input1" name="HAVE_TO_BE_THE_SAME" value="val1" checked />
<input type="radio" id="input2" name="HAVE_TO_BE_THE_SAME" value="val2" />

name - это то, что группирует переключатели вместе.Вы можете иметь разные id и value.Атрибут label for указывает на id элемента, а не на его имя.

И у вас слишком много ненужных разметок строк и столбцов.Попробуйте прочитать документацию по начальной загрузке еще раз. 

<div class="container-fluid">
    <div class="row">
        <!--
            By default, the div is displayed as block so you don't need
            `col-12` unless they're not displayed as block and you force them
            to.
         -->
        <div class="col-md-6">
            <div class="card"> ... </div>
        </div>
        <div class="col-md-6">
            <div class="card"> ... </div>
        </div>
    </div>
</div>

fiddle: http://jsfiddle.net/aq9Laaew/250477/

0 голосов
/ 16 октября 2018

Ваш второй фрагмент работает нормально, вы только что неправильно указали атрибут for на 1-м ярлыке, поэтому вам нужно щелкнуть сам переключатель, чтобы увидеть, как он работает.

Если вы измените forатрибут, от несуществующего newSurgery до input1, будет работать как положено: 

<label id="label1" class="btn btn-secondary active" for="input1"> 
<!-- not for="newSurgery"-->
    Radio1
    <input type="radio" id="input1" name="name2" value="val1" checked>
</label>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...