Question

我想使用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>

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

Answer 1

使用具有列大小类的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-horizontal”会将表单组更改为网格行（请参阅this），这样可以使列大小调整在所有显示大小上保持一致。 Here's a new fiddle反映了这种变化。

Answer 2

您必须阅读bs3，Bs3 grid system

中网格系统的工作原理

简短的说法是，您在屏幕宽度上有12列，并且您可以确定elemnt在指定这些条目时所需的列数col-sm-12

这意味着:(列） - （小/中等设备） - （将需要12列）

如果您使用的是asp，它在Site.ccs中有最大宽度，所以要小心。

查看此示例bs3 forms

我想你可以尝试这个：

<form class="form-inline" role="form">
    <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    </div>
    <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
    </div>
    <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
</form>

Answer 3

很高兴你对它在Bootstrap中的工作方式没问题，但我不是。实际上，我试图避免这种行为很重要的bootstrap表单元素。即我有一个带有两个无线电和一个下拉的表格，在xs中都应该适合一行。我浪费了整整一天试图找到一个使用bootstrap的解决方案，然后放开这个特定行的bootstrap。我仍然需要使用其他输入字段来获得输入字段的相同外观，（只是不一样的行为），这就是我将在接下来的几个小时内花费的东西，试图找到“表单控件”的匹配”。在XS屏幕上查看此代码。

<label style="width:3.5rem;"><input class="form-control-sm" type="radio" id="Reds" name="xx" checked> Reds</label>
<label style="width:3.5rem;"><input class="form-control-sm" type="radio" id="Blues" name="xx"> Blues</label>
<select name="type" class="form-control form-control-sm" style="width:7rem;">
<option value='0' selected='selected'>Shirts</option>
<option value='1'>Pants</option>
<option value='2'>Socks</option>
</select>
<button name="Find" type="submit" class="btn btn-g4 btn-sm">Find</button>

Bootstrap 3布局：表格过早崩溃

3 个答案: