Блог

Главная - Вопросы по программированию - Загрузочное радио встроенное в столбцы ввода и перенос текста

Загрузочное радио встроенное в столбцы ввода и перенос текста

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Как я могу заставить bootstrap выровнять мою форму радио, чтобы мой вопрос и три ответа были разделены на 4 столбца, например col-sm-3. Я хочу, чтобы он переносил текст в каждый столбец, когда он слишком длинный. пример формы ниже.

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form class="form-check-inline">
    <label class="control-label">This is some question: </label>
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="optradio" checked>Option 1 which is really long and spans most of the page compared to the other options
    </label>
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="optradio">Option 2 is a small option
    </label>
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="optradio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width
    </label>
  </form>
</div>

</body>
</html>

Я бы хотел, чтобы флажок был разделен на столбцы и обернул вводимый текст

 Form control: inline radio buttons
The form below contains three inline radio buttons:

This is some question: | Option 1 which is really long       | Option 2 is a small | option Option 3 is another long option which
                       | and spans most of the page compared |                     | i would prefer was wordwrapped and options 
                       | to the other options                |                     | divided equally over

| символ здесь я добавил только для обозначения столбцов, я не ожидаю, что они действительно будут присутствовать в выходных данных.

Ответ №1:

Вы неправильно используете классы container-row-column — <div class="container"><div class="row"><div class="col-xs-12">... обратитесь к документации Bootstrap 3.4.1 для получения дополнительной информации.

Кроме того, последняя версия Bootstrap — 4.6 с общедоступной бета-версией 5.0, рассмотрите возможность обновления вашей версии Boostrap.

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Form control: inline radio buttons</h2>
      <p>The form below contains three inline radio buttons:</p>
    </div>
  </div>
  <form class="form-check-inline row">
    <div class="col-xs-3">
      <label class="control-label">This is some question:</label>
    </div>
    <div class="col-xs-3">
      <label class="form-check-label"><input checked class="form-check-input" name="optradio" type="radio">Option 1 which is really long and spans most of the page compared to the other options</label>
    </div>
    <div class="col-xs-3">
      <label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 2 is a small option</label>
    </div>
    <div class="col-xs-3">
      <label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width</label>
    </div>
  </form>
</div>

</body>
</html>

Комментарии:

1. Ах, хорошо, спасибо, я не был уверен, что хорошей практикой было бы просто переносить каждый элемент в стандартную компоновку row / col или если в классах форм есть способ добавить его ширину столбца, как вы делаете с col для divs в строке.

2. Вы не должны этого делать <label class="form-check-label col-xs-3"> , поскольку метки не всегда являются родительскими элементами в формах — например, в 4.6 входные метки <div class="form-group"><label>labelname</label><input></div>

3. Спасибо, пытаюсь понять, почему это не работает с моим разделом head, но работает с вашим

4. Я использую ссылку cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css и скрипт https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js

5. Возможно, закрытые ранние / незакрытые divs? Bootstrap довольно эффектно разбивается на них. Кроме того, попробуйте использовать индентор кода, например 10bestdesign.com/dirtymarkup — не может сильно помочь без обновленного кода

Метки: