在中心对齐表格中的项目
[英]align items in a form at center
问题描述
I am new to the front end . 
我是前端的新手。 I actually want to make a markup which looks like , 我实际上想制作一个看起来像这样的标记，
so, I tried in the following way, 所以，我尝试了以下方式
<div className="row">
<div className="col-xs-4">
<div className="has-feedback">
<label className="control-label">Search Job</label>
<input type="text" className="form-control" id="inputValidation" placeholder="Search"/>
<span className="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
Now, Here, What I am getting is 现在，在这里，我得到的是
Can anyone help me with this? 谁能帮我这个？
5 个解决方案
解决方案1
1 2018-08-31 10:21:19
Here is complete code for you :) 这是完整的代码给您：)
<!DOCTYPE html>
<html lang="en">
<head>
<title>form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
.mi-abc {
padding: 10px;
display: inline-block;
background: lightgrey;
}
.mi-control {
width: 75%;
height: 35px;
padding-left: 10px;
}
.mi-icon {
position: absolute;
right: 30px;
top: 20px;
}
</style>
</head>
<body>
<div class="col-md-3 mi-abc">
<div class="wrapper">
<label class="mi-label">Search Job</label>
<input type="text" class="mi-control" placeholder="Search"/>
<span class="glyphicon glyphicon-search mi-icon"></span>
</div>
</div>
</body>
解决方案2
0 2018-08-31 09:54:47
you can use float property. 您可以使用float属性。
.control-label,.form-control{
float:left;
}
it will put elements from left for you. 它将为您放置左侧的元素。 so label comes first and then input will come at the right of it 因此标签首先出现，然后输入将出现在右边
also you can use flex 你也可以用flex
解决方案3
0 2018-08-31 10:01:58
<div class="form-inline"> <div class="form-group mb-2"> <label for="staticEmail2" class="sr-only">Search</label> <input type="text" readonly class="form-control" id="staticEmail2" value="" placeholder="search"> </div> </div>
解决方案4
0 2018-08-31 10:05:16
Please use "class" instead of "className", you can either use the "pull-left" class which is already available in bootstrap documentation. 请使用“ class”而不是“ className”，您可以使用引导文档中已经可用的“ pull-left”类。 you can use the below link as a reference. 您可以使用以下链接作为参考。
https://getbootstrap.com/docs/4.0/components/forms/ https://getbootstrap.com/docs/4.0/components/forms/
解决方案5
0 2018-08-31 11:04:59
As mentioned, the best way would be with the flex property on .has-feedback as follows: 如前所述，最好的方法是使用.has-feedback的flex属性，如下所示：
.has-feedback{
display: flex;
}
By default this will align it's children horizontally. 默认情况下，它将水平对齐其子级。
You could also float the children of .has-feedback left and right. 您还可以左右float .has-feedback的子.has-feedback 。
If you choose to float the children however, be prepared to have to clear .has-feedback so that it can calculate the height around it's children. 但是，如果您选择将子项浮动，则必须准备清除.has-feedback以便可以计算其子项周围的高度。 You can find an example on how to do that here: https://css-tricks.com/snippets/css/clear-fix/ 您可以在此处找到有关如何执行此操作的示例： https : //css-tricks.com/snippets/css/clear-fix/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.