css – Bootstrap 3布局：表格过早崩溃

2023年8月7日 161次阅读

我想使用bootstrap获取我的表单的以下布局：

Working on [Select field] [Select Button]

所以：所有元素都在一行上(有足够的空间可用).

但是当我减小浏览器的宽度时,一旦达到767像素宽,页面就会切换到一个奇怪的布局：

Working on

[Select field expanding over the whole row]

[Select Button]

虽然显然仍有足够的空间将表格保留在一行中.是否有(可能是简单的)方法来阻止该形式分成几行？

我复制了用于测试上述行为的HTML页面下面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-6 pull-left">
            <a href="#">
            Test Page
            </a>
        </div>
        <div class="col-sm-6 pull-right">
            You are logged in as abc@xyz.com
        </div>
    </div>

    <div class="row">        
        <form class="navbar-form navbar-left" role="search" action="#" method="post">
        <div class="form-group">

            <label for="id_field1" class="control-label">Working on</label>
            <select class="form-control" id="id_field1" name="field1">
            <option value="1" selected="selected">Choice 1</option>
            <option value="2">Choice 2</option>
            <option value="3">Choice 3</option>
            </select>
        </div>
        <button type="submit" class="btn btn-default">Select</button>
        </form>
    </div>

    <div class="row">
        <div class="col-sm-12">
        Stuff will come here...
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <p>This is a footer</p>
        </div>
    </div>
</div>

</body></html>

任何帮助和建议非常感谢！

最佳答案 使用具有列大小类的div(如“col-xs-2”)围绕行中的每个项目,如下所示：

<div class="form-group">
    <div class="col-xs-2">
        <label for="id_field1" class="control-label">Working on</label>
    </div>
    <div class="col-xs-6">
        <select class="form-control" id="id_field1" name="field1">
            <option value="1" selected="selected">Choice 1</option>
            <option value="2">Choice 2</option>
            <option value="3">Choice 3</option>
         </select>
     </div>

     <div class="col-xs-4">
          <button type="submit" class="btn btn-default">Select</button>
     </div>

 </div>

只要你使用’col-xs -…’,该行上的每一列即使在小型设备上也会保持在同一行. Here’s a fiddle.

编辑：

将表单类更改为“form-horizo​​ntal”会将表单组更改为网格行(请参阅this),这样可以使列大小调整在所有显示大小上保持一致. Here’s a new fiddle反映了这一变化.

点赞