twitter-bootstrap 内联形式的输入宽度 - Bootstrap 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39033326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Width of inputs in inline form - Bootstrap 4
提问by Sylvain C.
Good morning, I am trying to set up a inline form with inputs of different widths using Bootstrap 4. I have tried the different options available here: http://v4-alpha.getbootstrap.com/components/forms/.
早上好，我正在尝试使用 Bootstrap 4 设置具有不同宽度输入的内联表单。我尝试了以下可用的不同选项：http: //v4-alpha.getbootstrap.com/components/forms/。
This is as far as I went:
就我而言，这是：
<div class="container">
<div class="row">
<div class="col-xs-1">
<label for="exampleInputName2" class="col-form-label">Name</label>
</div>
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
</div>
But I am not using any form classes or tags.
但我没有使用任何表单类或标签。
---------------- EDIT ------------------------
- - - - - - - - 编辑 - - - - - - - - - - - -
To be more specific, how would you specify the widths of labels and inputs in this example coming from the Bootstrap 4 website?
更具体地说，在这个来自 Bootstrap 4 网站的示例中，您将如何指定标签和输入的宽度？
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
Any good and simple example would be welcome.
欢迎任何好的和简单的例子。
Thanks
谢谢
Sylvain
西尔万
回答by Jerad Rutnam
See the example below, if you want to use bootstrap v4 grid widths along with the form-inline
如果您想使用 bootstrap v4 网格宽度以及 form-inline
<form class="form-inline">
<div class="form-group row">
<div class="col-md-5">
<p class="form-control-static">[email protected]</p>
</div>
<div class="col-md-5">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary">Confirm identity</button>
</div>
</div>
</form>
Check the fiddle for more details: https://jsfiddle.net/dx0dzaqj/1/
检查小提琴以获取更多详细信息：https: //jsfiddle.net/dx0dzaqj/1/
回答by maxence51
To make the input takes all the available remaining width, set the input as
要使输入采用所有可用的剩余宽度，请将输入设置为
display:flex;
flex-grow:1
回答by jcjost
you could also use the Bootstrap 4 width utilities : (.w-25, .w-50, .w-75, .w-100, .mw-100)
您还可以使用 Bootstrap 4 宽度实用程序：（.w-25、.w-50、.w-75、.w-100、.mw-100）
<input type="some_type" class="form-control w-25">
回答by Rohullah Abdullahpour
Delete xsfrom col-*class, for example change col-xs-2into col-2. col-xs-*is for Bootstrap 3 and not BS 4.
xs从col-*类中删除，例如更改col-xs-2为col-2. col-xs-*适用于 Bootstrap 3 而不是 BS 4。
回答by Shano
Here's a simple example. Wrap it in a form element and you can add different inputs. Better to keep the col-xs- classes uniform so that they line up correctly
这是一个简单的例子。将它包装在一个表单元素中，您可以添加不同的输入。最好保持 col-xs- 类统一，以便它们正确排列
Make sure you have added the bootstrap css and js to your site.
确保您已将引导程序 css 和 js 添加到您的站点。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<div class="container">
<form>
<div class="form-group row">
<label for="name1" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name1" placeholder=".col-sm-10">
</div>
</div>
<div class="form-group row">
<label for="name2" class="col-sm-2 col-form-label">Other Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name2" placeholder=".col-sm-10">
</div>
</div>
<div class="form-group row">
<label for="name3" class="col-sm-2 col-form-label">Third Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name3" placeholder=".col-sm-10">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>