防止输入字段中断/换行答案

【问题标题】：Prevent input fields from breaking/wrapping防止输入字段中断/换行
【发布时间】：2015-10-22 00:40:54
【问题描述】：

我在下面有 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>

【问题讨论】：

标签： html forms twitter-bootstrap css

【解决方案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 像素宽的表单。”

您可以直接强制它们与 CSS 中的可变宽度保持内联并浮动元素。

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

【讨论】：

【解决方案2】：

您可以将表格用于选择字段和文本字段。在表格中，您可以指定宽度，因此两者都是内联的。

<table> 
    <tr><td><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></td></tr>
    <tr><td>
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    </td></tr>
    </table>

如果您的意思是内联，则两者具有相同的宽度并且彼此在彼此上。并不是说两者都在同一行。

【讨论】：

我应该早点想到这个......这是非常简单的黑客攻击。谢谢

【解决方案3】：

对我有用的是将标签和输入、选择、复选框等包装在 div 标签中。


<form>
<div style=" white-space: nowrap;overflow: hidden;" >
<label>
<select>
<option value="?">Select</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
</select>
</label>
</div>
</form

【讨论】：