Fexxi Ответов: 2

Система Bootstrap grid не работает для меня. Столбцы отображаются в виде новых строк

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

Я пытаюсь сделать 16-входную форму и имею в виду, как она должна выглядеть. После просмотра документации Bootstrap 4 я подумал, что она выглядит относительно прямолинейно, поэтому я взломал ее.

Я пытаюсь получить второй пример ввода справа от первого, но не испытываю никакой радости. Я просмотрел свой код и не вижу никакой причины, почему он помещает второй пример под первым, а не справа от него (как я хочу).

Я чувствую, что небольшое объяснение здесь будет иметь большое значение. Я не могу понять, почему он ведет себя так, как есть: 

<pre><!-- form start -->
       
       <form method="post" action="example.php">
          <div class="form-group-row">
           <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
              <input class="form-control" type="text" placeholder="Name" name="name">
               </div>
           </div>
        <br>
            
             <div class="form-group-row">
           <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
              <input class="form-control" type="text" placeholder="example" name="example">
              
               </div>
               
               <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
              <input class="form-control" type="text" placeholder="example" name="example">
              
               </div>
           </div>   
       </form>


Что я уже пробовал:

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

2 Ответов

Рейтинг:
2

Benktesh Sharma

Вы убедились, что у вас есть ссылка на bootstrap (т. е. bootstrap.min.css) в голове?

Далее у вас есть первый элемент с размером col 8, и только одно из двух полей развертки поместится в одну строку.

Кроме того, '< br/>' После первого поля, вероятно, не требуется. Следующее обновление вашего кода помещает три поля в 1 строку (так как я обновил размер col до 4 для первого поля и удалил "< br /> " и добавил ссылку на bootstrap cdn. 

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<form method="post" action="example.php">
         <div class="form-group-row">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
             <input class="form-control" type="text" placeholder="Name" name="name">
              </div>
          </div>

            <div class="form-group-row">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
             <input class="form-control" type="text" placeholder="example" name="example">

              </div>

              <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
             <input class="form-control" type="text" placeholder="example" name="example">

              </div>
          </div>
</form>
</body>
</html>

[no name]

Я использую тему Bootstrap, поэтому думал, что она должна быть там, но это не так далеко, как я могу видеть. Когда я попытался добавить ссылку, Все стало крошечным, так что я предполагаю, что не могу использовать его обычным способом.

Benktesh Sharma

Тема может быть дополнительной зависимостью. Также проверьте, используете ли вы Bootstrap 3 или 4.

[no name]

По правде говоря, я не знаю, как это проверить. Как я уже сказал, это кривая обучения PHP для меня, и я закончил тем, что открыл целую банку червей lol. Я вижу только вызовы JS Bootstrap, когда я ctrl+f 'bootstrap; поэтому не уверен, что там происходит. Файлы CSS находятся в папке под названием "startbootstrap-sb-admin-2-gh-pages". Я обязательно этим займусь. Большое спасибо за вашу помощь.

Benktesh Sharma

Не беспокойся. Вещи могут быть проще, если вы сделаете их проще. Bootstrap не является исключением. Для тестирования, просто добавьте ссылку для загрузки с CDN в той же странице
. Он будет переопределять bootrsap только на этой странице для вашего тестирования.

[no name]

Мне нужен был один длинный вход и два поменьше под ним. Я думаю, мне придется заняться другими вещами. Спасибо за вашу помощь.

Benktesh Sharma

Вы можете использовать col-lg-offset-4 в bootstrap 3, который переместит поле на это смещение слева.

Рейтинг:
14

Richard Deeming

Вы использовали несуществующий класс CSS form-group-row на ваших рядах. Это должны быть два отдельных класса: form-group row.

Вам также не нужно <br> как заметил Бенктеш.

И поскольку вы охватываете одинаковое количество столбцов при каждом размере, нет необходимости указывать каждый размер. col-xs-8 также будет применяться к sm, md, и lg если только вы не отмените его:

Сеточная система · Bootstrap[^]:
Точки останова сетки основаны на медиа-запросах минимальной ширины, что означает они применимы к этой единственной точке останова и ко всем тем, что выше нее (например,, .col-sm-4 применяется к малым, средним, большим и сверхбольшим устройствам, но не к первой точке останова xs).
Демонстрация[^]

NB: Если вы используете Bootstrap 4, Вам также нужно будет удалить -xs из столбца классы:
Сеточная система · Bootstrap[^]
Size        | Class Prefix
==========================
Extra small | .col-
Small       | .col-sm-
Medium      | .col-md-
Large       | .col-lg-
Extra large | .col-xl-
Обновленная демо-версия[^]

[no name]

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

[no name]

Это была проблема, большое спасибо и за дополнительную информацию (несомненно, сэкономит мне время в будущем).