html - 防止输入字段中断/换行

Question

我在下面有 2 个输入字段。一个选择另一个输入文本。即使在移动模式下，我也需要它保持在线。

如何防止其中的输入字段被破坏？无论屏幕尺寸如何，它们都保持内联。

<div class="col-sm-4">
    <label class="control-label">Form label</label>
    <div class="form-inline">
    <div class="form-group">
        <select class="form-control">
            <option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
        </select>
    </div>
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    </div>
</div>

Answer 1

来自 http://getbootstrap.com/css/

Bootstrap 的内联表单，如:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline">
  <div class="form-group">
    <select class="form-control" >
        <option>Thing One</option>
        <option>Thing Two</option>
    </select>
    
  </div>
  <div class="form-group">
    <input type="text" class="form-control">
  </div>  
</form>

文档中的声明“这仅适用于宽度至少为 768 像素的视口(viewport)中的表单。”

您可以直接强制它们与 CSS 中的流体宽度保持内联并 float 元素。

例如:https://jsfiddle.net/cm94dup9/