如何在同一行中对齐两列内容
[英]how to align two columns contents in same line
问题描述
below is my code 
下面是我的代码
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
i have created two columns in one row first column has label and under that input box next column has only label and it should be aligned inline with input box, but since only label was there it used to display on top. 我已经在一行中创建了两列，第一列具有标签，而在该输入框下，下一列仅具有标签，它应与输入框对齐，但是由于只有标签，因此它通常显示在顶部。 So i wrote one dummy label. 所以我写了一个虚拟标签。 Still it is not aligned with input box. 仍然没有与输入框对齐。 how to do this? 这个怎么做？ Is there any way to do it in bootstrap? 有什么办法可以在Bootstrap中做到吗？
2 个解决方案
解决方案1
0 2016-05-20 07:11:08
Add 添加 between label . label之间。 There should be some content inside label to make it work. label内应有一些内容才能使其正常工作。 So just add html code of empty space. 所以只需添加html的空白区域代码。
<label> </label>
However a better approach will be without bootstrap columns and using custom css as follows: 但是，更好的方法是没有引导程序列，并使用自定义CSS，如下所示：
.column-holder { table-layout: fixed; display: table; width: 100%; } .column-holder .column { vertical-align: bottom; display: table-cell; padding: 0 15px; } label { display: block; } input { display: block; width: 100%; }
<div class="column-holder"> <div class="column"> <label>name</label> <input type="text" class="form-input-icon"> </div> <div class="column"> <label>test</label> </div> </div>
解决方案2
0 2016-05-20 08:57:42
Without Bootstrap : 没有引导程序：
that is happens because you put every label inside same div tag again and again. 发生这种情况是因为您一次又一次地将每个label放入同一div标签中。
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
when you remove those two same div tags or put all labels and input tag inside a single label then all elements will gets inline automatically. 当您删除这两个相同的div标签或将所有标签和input标签放在单个标签内时，所有元素都会自动内联。
HOW TO DO : 怎么做 ：
<div class="row"> <div class="col-md-12"> <div class="col-md-6"> <label>name</label> <input type="text" class="form-input-icon"> <label></label> <label style="margin-top: 30px;">test</label> </div> </div> </div>
Using Bootstrap : 使用Bootstrap：
Yes you can do same thing using bootstrap even that is more easy and looks more beautiful. 是的，您可以使用引导程序来做同样的事情，即使这样更容易并且看起来更漂亮。 here is a simple example for you. 这是一个简单的例子。 copy this code and run with chrome or firefox or safari this code will work perfectly you can visit this site: for more detail or check this out inline form using bootstrap 复制此代码并与chrome或firefox或safari一起运行，此代码将完美运行，您可以访问此网站： 有关更多详细信息，或使用引导程序查看此内联表单
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Example of inline form</h2> <form class="form-inline" role="form"> <div class="form-group"> <label >Name : </label> <input type="email" class="form-control" id="name" placeholder="Enter your name "> </div> <div class="form-group"> <label for="email">Email : </label> <input type="password" class="form-control" id="email" placeholder="enter your email"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.