Bootstrap 4 - 内联表单

时间：2018-04-14 07:45:25

标签： html css twitter-bootstrap css-selectors bootstrap-4

我注意到旧的Bootstrap v3和新的Bootstrap V4之间的内联形式如何表现不同。

我有两个代码段：

Bootstrap 3

在此版本中，当页面变窄时，每个表单元素都会调整大小以占据页面的整个宽度。 Bootstrap 4不再发生这种情况。我看不出Bootstrap 3 docs提到了这种全宽行为 - 但它仍然这样做 - 就像在，当字段仍然在内联形式的全宽度时他们在form-group div。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<h1>bootstrap/3.3.6</h1>

<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
   <input type='hidden' name='method' value='search' />
   <div class='form-group'>
      <input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
   </div>
   <div class='form-group'>
      <select name='mn' id='mn' class='form-control'>
         <option value='n'>Month</option>
         <option  value='1'>January</option>
         <option  value='2'>February</option>
      </select>
   </div>
   <div class='form-group'>
      <select class='form-control' name='yr' id='yr'>
         <option value='n'>Year</option>
         <option  value='1995'>1995</option>
         <option  value='1996'>1996</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='format' id='format' class='form-control'>
         <option value='n'>Format</option>
         <option  value='1'>1</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='week_end_or_not' id='week_end_or_not' class='form-control'>
         <option value='n'>Weekend Or Not</option>
         <option  value='week'>Week Days</option>
         <option  value='weekend'>Weekend</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='work_days' id='work_days' class='form-control'>
         <option value='n'>Work Days?</option>
         <option  value='yes'>Yes</option>
         <option  value='no'>No</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='exact_phrase' id='exact_phrase' class='form-control'>
         <option value='n'>Exact Phrase?</option>
         <option  value='yes'>Yes</option>
         <option  value='no'>No</option>
      </select>
   </div>
   <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>

Bootstrap 4

现在，当在Bootstrap 4中使用相同的HTML时，不再发生全宽行为。与Bootstrap 3一样，我在the Bootstrap 4 docs中的内联表单上的较窄页面上看不到对全宽表单字段的引用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<h1>bootstrap/4.0.0</h1>

<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
   <input type='hidden' name='method' value='search' />
   <div class='form-group'>
      <input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
   </div>
   <div class='form-group'>
      <select name='mn' id='mn' class='form-control'>
         <option value='n'>Month</option>
         <option  value='1'>January</option>
         <option  value='2'>February</option>
      </select>
   </div>
   <div class='form-group'>
      <select class='form-control' name='yr' id='yr'>
         <option value='n'>Year</option>
         <option  value='1995'>1995</option>
         <option  value='1996'>1996</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='format' id='format' class='form-control'>
         <option value='n'>Format</option>
         <option  value='1'>1</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='week_end_or_not' id='week_end_or_not' class='form-control'>
         <option value='n'>Weekend Or Not</option>
         <option  value='week'>Week Days</option>
         <option  value='weekend'>Weekend</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='work_days' id='work_days' class='form-control'>
         <option value='n'>Work Days?</option>
         <option  value='yes'>Yes</option>
         <option  value='no'>No</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='exact_phrase' id='exact_phrase' class='form-control'>
         <option value='n'>Exact Phrase?</option>
         <option  value='yes'>Yes</option>
         <option  value='no'>No</option>
      </select>
   </div>
   <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>

我想知道是否有人知道在Bootstrap 4中复制行为的方法，以便表单字段的宽度与Bootstrap 3中的相同？

我不想从表单中删除class='form-inline'，因为我希望在更宽的屏幕上将表单显示为内联。

2 个答案:

答案 0 :(得分：3)

只需删除＆＃39; .form-group＆＃39;从您的代码div，您需要添加767分辨率的媒体查询。 在Bootstrap 4中 - 输入在宽度为576px的屏幕下获得100％宽度。

＆＃13;
＆＃13; 
@media (max-width: 767px){
  .form-inline .form-control {
    display: block;
    width: 100%;
  }
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<h1>bootstrap/4.0.0</h1>

<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
   <input type='hidden' name='method' value='search' />
   
      <input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
   
      <select name='mn' id='mn' class='form-control'>
         <option value='n'>Month</option>
         <option  value='1'>January</option>
         <option  value='2'>February</option>
      </select>
   
      <select class='form-control' name='yr' id='yr'>
         <option value='n'>Year</option>
         <option  value='1995'>1995</option>
         <option  value='1996'>1996</option>
      </select>
   
      <select name='format' id='format' class='form-control'>
         <option value='n'>Format</option>
         <option  value='1'>1</option>
      </select>
   
      <select name='week_end_or_not' id='week_end_or_not' class='form-control'>
         <option value='n'>Weekend Or Not</option>
         <option  value='week'>Week Days</option>
         <option  value='weekend'>Weekend</option>
      </select>
   
      <select name='work_days' id='work_days' class='form-control'>
         <option value='n'>Work Days?</option>
         <option  value='yes'>Yes</option>
         <option  value='no'>No</option>
      </select>
   
      <select name='exact_phrase' id='exact_phrase' class='form-control'>
         <option value='n'>Exact Phrase?</option>
         <option  value='yes'>Yes</option>
         <option  value='no'>No</option>
      </select>
   
   <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>
＆＃13;
＆＃13;
＆＃13;

这是Fiddel Demo

答案 1 :(得分：1)

解决方案1：.form-inline没有分组

根据the documentation，您只需使用.inline-form元素上的<form>类，而无需对单个输入元素进行分组（只需删除相应的<div class="form-group">元素）。< / p>

有关调整分界点的信息，请参阅Responsive Breakpoints section in the documentation。

以下是工作示例（全屏观看并更改视口宽度以查看效果）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<h1>bootstrap/4.0.0</h1>

<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>

  <input type='hidden' name='method' value='search' />

  <input type='text' class='form-control' id='str' name='str' placeholder='Search'>

  <select name='mn' id='mn' class='form-control'>
     <option value='n'>Month</option>
     <option  value='1'>January</option>
     <option  value='2'>February</option>
  </select>

  <select class='form-control' name='yr' id='yr'>
     <option value='n'>Year</option>
     <option  value='1995'>1995</option>
     <option  value='1996'>1996</option>
  </select>

  <select name='format' id='format' class='form-control'>
     <option value='n'>Format</option>
     <option  value='1'>1</option>
  </select>

  <select name='week_end_or_not' id='week_end_or_not' class='form-control'>
     <option value='n'>Weekend Or Not</option>
     <option  value='week'>Week Days</option>
     <option  value='weekend'>Weekend</option>
  </select>

  <select name='work_days' id='work_days' class='form-control'>
     <option value='n'>Work Days?</option>
     <option  value='yes'>Yes</option>
     <option  value='no'>No</option>
  </select>

  <select name='exact_phrase' id='exact_phrase' class='form-control'>
     <option value='n'>Exact Phrase?</option>
     <option  value='yes'>Yes</option>
     <option  value='no'>No</option>
  </select>

  <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>

</form>

解决方案2：.input-group而不是.form-group

如果您仍想对输入元素进行分组，则可以将.form-group元素更改为.input-group元素。请参阅the documentation中多输入部分。

以下是工作示例（全屏观看并更改视口宽度以查看效果）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<h1>bootstrap/4.0.0</h1>

<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
   <input type='hidden' name='method' value='search' />
   <div class='form-group'>
      <input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
   </div>
   <div class='input-group'>
      <select name='mn' id='mn' class='form-control'>
         <option value='n'>Month</option>
         <option  value='1'>January</option>
         <option  value='2'>February</option>
      </select>
   </div>
   <div class='input-group'>
      <select class='form-control' name='yr' id='yr'>
         <option value='n'>Year</option>
         <option  value='1995'>1995</option>
         <option  value='1996'>1996</option>
      </select>
   </div>
   <div class='input-group'>
      <select name='format' id='format' class='form-control'>
         <option value='n'>Format</option>
         <option  value='1'>1</option>
      </select>
   </div>
   <div class='input-group'>
      <select name='week_end_or_not' id='week_end_or_not' class='form-control'>
         <option value='n'>Weekend Or Not</option>
         <option  value='week'>Week Days</option>
         <option  value='weekend'>Weekend</option>
      </select>
   </div>
   <div class='input-group'>
      <select name='work_days' id='work_days' class='form-control'>
         <option value='n'>Work Days?</option>
         <option  value='yes'>Yes</option>
         <option  value='no'>No</option>
      </select>
   </div>
   <div class='input-group'>
      <select name='exact_phrase' id='exact_phrase' class='form-control'>
         <option value='n'>Exact Phrase?</option>
         <option  value='yes'>Yes</option>
         <option  value='no'>No</option>
      </select>
   </div>
   <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>

相关问题
最新问题