html - 在 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>

但如果我添加 Bootstrap ，<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;">但效果不佳。如何使用 Bootstrap 获得所需的格式。

我只想拥有 id="query"和 id="mySelect"在不同的背景颜色。这可能吗？

谢谢。

Answer 1

只需删除 class="form-inline"即可，请参见图片