Question

下面是我的代码

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

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

Answer 1

在 之间添加label。 label中应该包含一些内容以使其有效。所以只需添加html空格代码。

<label>&nbsp;</label>

然而，更好的方法是没有bootstrap列并使用自定义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>

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

是的，你可以使用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>

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

2 个答案: