html - 如何内联显示 HTML 表单输入元素(Bootstrap 的类 "form-group")？

Question

我正在使用 Bootstrap 的表单组和表单控件类来创建一个简单的 HTML。请引用屏幕截图。我尝试将 form-control 类的显示属性设置为内联，但 html 元素没有内联显示。 PFB 我的代码片段。

  <div id="user_search" class="form-group" style="display:inline;">
        <label for="search_id" class="label_font">Search Title</label>
    <input type="text" class="form-control" id="search_id" placeholder="Movie Title, TV Show title..." size="40">
    <label for="genre_id" >Genre</label>
    <select  id="genre_id">
        <option></option>
        <option>Action</option>
        <option>Adventure</option>
        <option>Animation</option>
        <option>Biography</option>
        <option>Comedy</option>
        <option>Crime</option>
        <option>Documentary</option>
        <option>Drama</option>
        <option>Family</option>
        <option>Fantasy</option>
        <option>Film-Noir</option>
        <option>Game-Show</option>
        <option>History</option>
        <option>Horror</option>
        <option>Music</option>
        <option>Musical</option>
        <option>Mystery</option>
        <option>News</option>
        <option>Reality-TV</option>
        <option>Romance</option>
        <option>Sci-Fi</option>
        <option>Sport</option>
        <option>Talk-Show</option>
        <option>Thriller</option>
        <option>War</option>
        <option>Western</option>
    </select>
    <label for="type_id" >Title Type</label>
    <select id="type_id">
        <option></option>
        <option>Movie</option>
        <option>TV Show</option>
    </select>
    <label for="year_id" >Year</label>
    <input type="number"  width="10" min="1900" max="2025" step="1" value="2016" id="year_id">
    <button type="button"  id="search_Title">Search Title</button>

</div>

CSS文件

.form-control{
显示:内联；

我也试过 display:inline!important。但是看不出有什么区别。我希望使用 Bootstrap 的表单组和表单控制类在一行中显示所有表单 .

Answer 1

您应该简单地使用 form-inline 类 ... 根据 Bootstrap documentation .基本上用另一个具有'form-inline'类的div包装你应该很好。不需要您的 display:inline; 额外的 css。