如何在同一行对齐两列内容答案

【问题标题】：how to align two columns contents in same line如何在同一行对齐两列内容
【发布时间】：2016-09-17 07:59:53
【问题描述】：

下面是我的代码

<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>

我在一行中创建了两列第一列有标签，在那个输入框下面下一列只有标签，它应该与输入框内联对齐，但由于只有标签在那里，它用于显示在顶部。所以我写了一个虚拟标签。它仍然没有与输入框对齐。这个怎么做？有没有办法在引导程序中做到这一点？

【问题讨论】：

标签： html css angularjs angular-ui-bootstrap

【解决方案1】：

在label 之间添加&nbsp;。 label 中应该有一些内容才能使其工作。所以只需添加html空格代码。

<label>&nbsp;</label>

但是，更好的方法是不使用引导列并使用自定义 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】：

没有引导：

这是因为您一次又一次地将每个 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>

当您删除这两个相同的div 标签或将所有标签和input 标签放在一个标签内时，所有元素将自动内联。

怎么做：

<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>

使用引导：

是的，你可以使用 bootstrap 做同样的事情，即使这样更简单，看起来更漂亮。这是一个简单的例子。 复制此代码并使用 chrome 或 firefox 或 safari 运行此代码将完美运行 你可以访问这个网站：for more detail 或者看看这个inline form using bootstrap

<!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>

【讨论】：