我遇到了一个问题,我真的不知道如何应对。 我正在研究BootStrap 3,我正在尝试制作一些内联表单,因为它比完整的垂直表单更加用户友好(我不想永远滚动)
我找到了一些内联正常输入的方法,但是当涉及带有图标(font awesome
)的输入时,我可以想出如何内联它们,但它们并排排列,它们之间没有任何空格。
此外,我不知道如何改变它们的宽度,就像我使用正常输入(例如col-sm-4
)。
我希望“电子邮件”和“电话”能够被删除并改变其宽度
请查看我的代码以及解释它的下图: http://www.bootply.com/T8w3oRE3Sn
答案 0 :(得分:2)
您在表格组中遗漏了一些内容,所以我已经把事情搞砸了。 Hope it will help you :)
以下是工作片段:
.myform .form-inline .input-group .input-group-addon{ width:20px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
<div class="col-xs-12">
<form name="myform" role="form" novalidate>
<div class="form-inline ">
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email de l'interlocuteur">
</div>
</div>
<div class="form-group col-xs-6">
<div class="input-group col-xs-12">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
</div>
</div>
</div>
</form>
</div>
</div>
&#13;
答案 1 :(得分:0)
试试这个
如果您在大屏幕中看到它,它将是内联的。 您必须使用
form-inline
类来使内联形式。
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
&#13;
答案 2 :(得分:-2)
你只需要对bootstrap网格系统有很好的理解
<div class="form-group row">
<label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail3">
</div>
<label for="inputEmail5" class="col-sm-1 control-label">Poste</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
</div>