Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="section-component">
  <h1>Contact Person</h1>
  <div class="form-group row">
    <div class="col-xs-6 form-field">
      <label for="ex1">Name</label>
      <input class="form-control" id="ex1" placeholder="First name" type="text">
    </div>
    <div class="col-xs-6 form-field">
      <input class="form-control" id="ex1" placeholder="Last name" type="text">
    </div>
  </div>
</section>

当我从第二个字段中取出标签时，两个输入字段在同一行中不对齐如何纠正？

Answer 1

如果您打算只使用一个标签，请将标签设为form-group的兄弟姐妹，而您可以使用<span>或任何其他元素，因为从语义上讲，<label>不适用于此类命名，就像在联系人中使用<h1>而不是在风格

中使用<label>一样

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="section-component">
  <h1>Contact Person</h1>
  <label for="ex1">Name</label>
  <div class="form-group row">
    <div class="col-xs-6 form-field">
      <input class="form-control" id="ex1" placeholder="First name" type="text">
    </div>
    <div class="col-xs-6 form-field">
      <input class="form-control" id="ex1" placeholder="Last name" type="text">
    </div>
  </div>
</section>

Answer 2

Swellar在他的回答中有一个很好的解决方案。但是，如果您正在寻找替代方法，可以放置一个虚拟label元素，然后将其CSS属性设置为visibility: hidden;。因此，您不必从第二个字段中取出label元素，并且此标签将被隐藏。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="section-component">
  <h1>Contact Person</h1>
  <div class="form-group row">
    <div class="col-xs-6 form-field">
      <label for="ex1">Name</label>
      <input class="form-control" id="ex1" placeholder="First name" type="text">
    </div>
    <div class="col-xs-6 form-field">
      <label for="ex1" style="visibility: hidden;">LName</label>
      <input class="form-control" id="ex1" placeholder="Last name" type="text">
    </div>
  </div>
</section>

Answer 3

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="section-component">
  <div class="col-xs-12"><h1>Contact Person</h1> </div>
 
  <div class="form-group">
    <div class="col-xs-6 form-field">
      <label for="ex1">Name</label>
      <input class="form-control" id="ex1" placeholder="First name" type="text">
    </div>
 </div> 
 
 
 <div class="form-group">
    <div class="col-xs-6 form-field">
    <label for="ex2">Last Name</label>
      <input class="form-control" id="ex2" placeholder="Last name" type="text">
    </div>
 </div>   
</section>

＆＃13;

Answer 4

您必须在姓氏字段中添加<label>。您应该始终包含一个标签，以便更好地访问。如果您不想使用标签（不推荐使用），您可以使用弹性框将其与底部对齐：

.form-group: {
  align-items: flex-end;
  display: flex;
}

Answer 5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- website templates CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- custom  CSS -->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <!-- website templates  fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
</head>
<body>
<div class="container">
    <form>
     <div class="form-group row">
          <div class="col-xs-6 form-field">
            <label for="ex1" style="margin-bottom:0">Name</label>
            <input class="form-control" id="ex1" placeholder="First name" type="text">
          </div>
          <div class="col-xs-6 form-field">
          <label></label>
            <input class="form-control" id="ex1" placeholder="Last name" type="text">
          </div>
        </div> 
    </form>
</div>
 
</body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--  website template JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- custom date picker  JavaScript -->
<script src="/js/myScript1.js"></script>
</html>

如何对齐输入字段？

5 个答案: