<br> не прерывая строки в формах с помощью Bootstrap

Question

Я хотел бы получить макет формы, как показано ниже

https://jsfiddle.net/May_Y/6w9nd73c/20/

<form id="cat_select" class="form-inline">
  <input class="c" name="c" id="c" type="text" style="width:10%"><br><br> Select any below:<br><br>
  <input class="l0" name="l0" id="l0" type="text" style="width:30%">
  <input class="l1" name="l1" id="l1" type="text" style="width:30%">
  <input class="l2" name="l2" id="l2" type="text" style="width:30%">
  <input class="l3" name="l3" id="l3" type="text" style="width:50%">
  <input class="l4" name="l4" id="l4" type="text" style="width:50%">
  <input class="l5" name="l5" id="l5" type="text" style="width:100%">
  <input class="l6" name="l6" id="l6" type="text" style="width:100%">
  <br>
  <input `id="query" class="form-control mr-sm-2" type="query" placeholder="optional input" aria-label="query" name='query' value="" style="width:50%">
  <select id="mySelect">
    <option value="" disabled selected>Sort by</option>
    <option>1</option>
    <option>2</option>
  </select><br><br>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>

но если я добавлю бутстрап, <br> больше не будет работать.

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<form id="cat_select" class="form-inline">
  <input class="c" name="c" id="c" type="text" style="width:10%"><br><br> Select any below:<br><br>
  <input class="l0" name="l0" id="l0" type="text" style="width:30%">
  <input class="l1" name="l1" id="l1" type="text" style="width:30%">
  <input class="l2" name="l2" id="l2" type="text" style="width:30%">
  <input class="l3" name="l3" id="l3" type="text" style="width:50%">
  <input class="l4" name="l4" id="l4" type="text" style="width:50%">
  <input class="l5" name="l5" id="l5" type="text" style="width:100%">
  <input class="l6" name="l6" id="l6" type="text" style="width:100%">
  <br>
  <input `id="query" class="form-control mr-sm-2" type="query" placeholder="optional input" aria-label="query" name='query' value="" style="width:50%">
  <select id="mySelect">
    <option value="" disabled selected>Sort by</option>
    <option>1</option>
    <option>2</option>
  </select><br><br>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>

Я пробовал с <br style="clear: both;">, но он также не работает. Как я могу получить нужный формат с помощью начальной загрузки.

Я бы хотел, чтобы только id="query" и id="mySelect" имели другой цвет фона. Это возможно?

Спасибо.

Answer 1

просто удалите class = "form-inline", он будет работать, см. Изображение

Answer 2

br здесь являются прямыми потомками блока flex и рассматриваются как любой изгибаемый ребенок (стоящий в направлении гибкого потока) .

Вы можете использовать:

• другой элемент и установите его ширину 100% <p class="w-100"><!-- will also break a line if boostrap is not loaded --></p> вместо <br><br>

требуется изменить HTML

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<form id="cat_select" class="form-inline ">
  <input class="c" name="c" id="c" type="text" style="width:10%"><br><br> Select any below:<br><br>
  <input class="l0" name="l0" id="l0" type="text" style="width:30%">
  <input class="l1" name="l1" id="l1" type="text" style="width:30%">
  <input class="l2" name="l2" id="l2" type="text" style="width:30%">
  <input class="l3" name="l3" id="l3" type="text" style="width:50%">
  <input class="l4" name="l4" id="l4" type="text" style="width:50%">
  <input class="l5" name="l5" id="l5" type="text" style="width:100%">
  <input class="l6" name="l6" id="l6" type="text" style="width:100%">
  <br>
  <input `id="query" class="form-control mr-sm-2" type="query" placeholder="optional input" aria-label="query" name='query' value="" style="width:50%">
  <select id="mySelect">
    <option value="" disabled selected>Sort by</option>
    <option>1</option>
    <option>2</option>
  </select>
  <p class="w-100"><!-- will also break a line if boostrap is not loaded --></p>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>

• или используйте псевдо и порядок

требуется добавить дополнительные css

#cat_select:after {
content:'';
width:100%;
height:1em;
order:1;
}
#cat_submit {
order:2
}

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<form id="cat_select" class="form-inline ">
  <input class="c" name="c" id="c" type="text" style="width:10%"><br><br> Select any below:<br><br>
  <input class="l0" name="l0" id="l0" type="text" style="width:30%">
  <input class="l1" name="l1" id="l1" type="text" style="width:30%">
  <input class="l2" name="l2" id="l2" type="text" style="width:30%">
  <input class="l3" name="l3" id="l3" type="text" style="width:50%">
  <input class="l4" name="l4" id="l4" type="text" style="width:50%">
  <input class="l5" name="l5" id="l5" type="text" style="width:100%">
  <input class="l6" name="l6" id="l6" type="text" style="width:100%">
  <br>
  <input `id="query" class="form-control mr-sm-2" type="query" placeholder="optional input" aria-label="query" name='query' value="" style="width:50%">
  <select id="mySelect">
    <option value="" disabled selected>Sort by</option>
    <option>1</option>
    <option>2</option>
  </select><br><br>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>

Answer 3

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

С другой стороны, можно изменить цвет фона только для запроса и mySelectID классы. Вот изображение:

Вам нужно только добавить дополнительные классы. В моем случае есть классы test и test_2. Проверьте изображение:

Answer 4

1. <br> должно работать с начальной загрузкой, возможно, что-то еще нарушает ваш тег
   , ничего не могу сказать по этому поводу без проверки вашего фактического кода.

2. Чтобы установить другой цвет фона, вам нужно создать некоторый класс в CSS и установить этот класс для определенных элементов, где вам нужен этот цвет фона. (в вашем случае id="query" и id="mySelect")

Стиль / CSS .classname { background: red; }

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

`<input `id="query" class="form-control mr-sm-2 classname" type="query" placeholder="optional input" aria-label="query" name = 'query'style="width:50%">
<select id="mySelect" class="classname">
   <option value="" disabled selected>Sort by</option>
   <option>1</option>
   <option>2</option>
</select>`