Bootstrap 4 Form Input - Выровнять флажки

У меня есть форма Bootstrap, в которой используются флажки - в одном случае есть большое количество вариантов на выбор. Можно ли выровнять их так, чтобы они отображались в «столбцах» или подобном - на данный момент они просто отображаются в одном длинном списке, что затрудняет чтение.

Вот как это сейчас выглядит:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel = "stylesheet" />

<body>

  <main role = "main" class = "container">

    <div>

      <form method = "get" action = "projects.php" role = "form">
        <input type = "hidden" name = "action" value = "projectsFind">

        <div class = "form-group row">
          <label for = "sectionNumber" class = "col-sm-2 col-form-label">Section Number</label>
          <div class = "col-sm-10">
            <input type = "text" class = "form-control" id = "sectionNumber" name = "sectionNumber" placeholder = "Section Number">
          </div>
        </div>
        <div class = "form-group row">
          <div class = "col-sm-2">Selections</div>
          <div class = "col-sm-10">
            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Hot Food">
              <label class = "form-check-label" for = "gridCheck1">
            Hot Food            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Retail">
              <label class = "form-check-label" for = "gridCheck1">
            Retail            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Affordable">
              <label class = "form-check-label" for = "gridCheck1">
            Affordable            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Canteen">
              <label class = "form-check-label" for = "gridCheck1">
            Canteen            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "At Home">
              <label class = "form-check-label" for = "gridCheck1">
            At Home            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Residential">
              <label class = "form-check-label" for = "gridCheck1">
            Residential            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Hospitality">
              <label class = "form-check-label" for = "gridCheck1">
            Hospitality            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Supermarket">
              <label class = "form-check-label" for = "gridCheck1">
            Supermarket            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Education">
              <label class = "form-check-label" for = "gridCheck1">
            Education            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Student">
              <label class = "form-check-label" for = "gridCheck1">
            Student            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Leisure">
              <label class = "form-check-label" for = "gridCheck1">
            Leisure            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Exhibition">
              <label class = "form-check-label" for = "gridCheck1">
            Exhibition            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Health">
              <label class = "form-check-label" for = "gridCheck1">
            Health            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Seniors">
              <label class = "form-check-label" for = "gridCheck1">
            Seniors            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Restaurant">
              <label class = "form-check-label" for = "gridCheck1">
            Restaurant            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Standard">
              <label class = "form-check-label" for = "gridCheck1">
            Standard            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Industry">
              <label class = "form-check-label" for = "gridCheck1">
            Industry            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Social">
              <label class = "form-check-label" for = "gridCheck1">
            Social            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Recycle">
              <label class = "form-check-label" for = "gridCheck1">
            Recycle            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Re-use">
              <label class = "form-check-label" for = "gridCheck1">
            Re-use            </label>
            </div>

          </div>
        </div>



      </form>

Вы можете видеть, что «Выборы» просто перечислены в текущем списке. Есть ли способ выровнять флажки «Выборки» в более удобном для чтения формате?

html css bootstrap-4

15.05.2018 06:27

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 648

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить к .form-check-inline фиксированную ширину, это выровняет их по столбцу, как макет.

Значение ширины должно быть немного больше ширины самого длинного слова.

.form-check-inline {
  width: 150px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel = "stylesheet" />

<body>

  <main role = "main" class = "container">

    <div>

      <form method = "get" action = "projects.php" role = "form">
        <input type = "hidden" name = "action" value = "projectsFind">

        <div class = "form-group row">
          <label for = "sectionNumber" class = "col-sm-2 col-form-label">Section Number</label>
          <div class = "col-sm-10">
            <input type = "text" class = "form-control" id = "sectionNumber" name = "sectionNumber" placeholder = "Section Number">
          </div>
        </div>
        <div class = "form-group row">
          <div class = "col-sm-2">Selections</div>
          <div class = "col-sm-10">
            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Hot Food">
              <label class = "form-check-label" for = "gridCheck1">
            Hot Food            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Retail">
              <label class = "form-check-label" for = "gridCheck1">
            Retail            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Affordable">
              <label class = "form-check-label" for = "gridCheck1">
            Affordable            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Canteen">
              <label class = "form-check-label" for = "gridCheck1">
            Canteen            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "At Home">
              <label class = "form-check-label" for = "gridCheck1">
            At Home            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Residential">
              <label class = "form-check-label" for = "gridCheck1">
            Residential            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Hospitality">
              <label class = "form-check-label" for = "gridCheck1">
            Hospitality            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Supermarket">
              <label class = "form-check-label" for = "gridCheck1">
            Supermarket            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Education">
              <label class = "form-check-label" for = "gridCheck1">
            Education            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Student">
              <label class = "form-check-label" for = "gridCheck1">
            Student            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Leisure">
              <label class = "form-check-label" for = "gridCheck1">
            Leisure            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Exhibition">
              <label class = "form-check-label" for = "gridCheck1">
            Exhibition            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Health">
              <label class = "form-check-label" for = "gridCheck1">
            Health            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Seniors">
              <label class = "form-check-label" for = "gridCheck1">
            Seniors            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Restaurant">
              <label class = "form-check-label" for = "gridCheck1">
            Restaurant            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Standard">
              <label class = "form-check-label" for = "gridCheck1">
            Standard            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Industry">
              <label class = "form-check-label" for = "gridCheck1">
            Industry            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Social">
              <label class = "form-check-label" for = "gridCheck1">
            Social            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Recycle">
              <label class = "form-check-label" for = "gridCheck1">
            Recycle            </label>
            </div>

            <div class = "form-check form-check-inline">
              <input class = "form-check-input" type = "checkbox" name = "footTypes[]" id = "footTypes" value = "Re-use">
              <label class = "form-check-label" for = "gridCheck1">
            Re-use            </label>
            </div>

          </div>
        </div>



      </form>

15.05.2018 06:35

Другие вопросы по теме

Чтение значения стилей css с помощью nodejs

Отрегулируйте размер ввода в Bootstrap 4

Функция LogOff в NavBar не работает в MVC5

Показывать всплывающую подсказку при выделении текста

Строка поиска короче остальной части веб-сайта?

Значение CSS 'height' идет вниз, а не вверх

Кнопка видна при наведении курсора на div

Отображение содержимого нижнего колонтитула централизованно

CSS Grid Layout Dynamic Rows

Автоматический разрыв столбцов css

Bootstrap 4 Form Input - Выровнять флажки

Ответы 1

Другие вопросы по теме

Похожие вопросы