Question

我希望将标签和输入放在一行中。我知道form-horizontal，form-inline。但是我的p和label上面有一些input个标签，看起来都很好。

 <div class="container">
    <div class="row">
        <p class="pull-left">Name: <strong>John Smith</strong></p>
        <p class="pull-right">Projects completed: 4</p>
    </div>
    <div class="row c-notes">
       <label>Manager Note:</label>
       <input class="form-control">
    </div>        
  </div>

我希望输入在标签后占用所有空格。我知道我可以使用col-**类，但是在高分辨率下，标签和输入之间会有一些空间，但我不需要这个空间。

查看DEMO

Answer 1

使用 CSS Flexbox 。像：

.c-notes {
  display: flex;
  align-items: center;
}

.c-notes label {
  flex: 0 auto;
  padding-right: 10px;
}

.c-notes input {
  flex: 1;
}

在下面的代码段中查看第一个文字字段，或查看更新的 JSBin 。

.c-notes {
  display: flex;
  align-items: center;
}
.c-notes label {
  flex: 0 auto;
  padding-right: 10px;
}
.c-notes input {
  flex: 1;
}
.comment {
  font-size: 12px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p class="comment">My try, I just use witdh proeprty, but it also has problem with different resolution.</p>
  <div class="container">
    <div class="row">
        <p class="pull-left">Name: <strong>John Smith</strong></p>
        <p class="pull-right">Projects completed: 4</p>
    </div>
    <div class="row c-notes">
       <label>Manager Note:</label>
       <input class="form-control">
    </div>
    
  </div>
  
  <hr/>
  <p class="comment">Option 2, use col-xx class, but there is space between label and input, increae ouput window and you will see.</p>
  
  <div class="container">
    <div class="row">
        <p class="pull-left">Name: <strong>John Smith</strong></p>
        <p class="pull-right">Projects completed: 4</p>
    </div>
    <div class="row">
      <div class="form-horizontal">
        <div class="form-group">
           <label class="col-sm-2">Manager Note:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="Note">
            </div>          
          </div>
        </div>
    </div>
    
  </div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

希望这有帮助！

Answer 2

只需添加以下css规则。

.c-notes {
    display: flex;
}

见下文

.c-notes{
   display: flex;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <p class="pull-left">Name: <strong>John Smith</strong></p>
        <p class="pull-right">Projects completed: 4</p>
    </div>
    <div class="row c-notes">
       <label>Manager Note:</label>
       <input class="form-control">
    </div>
  </div>
</div>

在同一行上输入和标签，没有form-horizontal和col-XX类

2 个答案:

在同一行上输入和标签，没有form-horizo​​ntal和col-XX类

2 个答案:

在同一行上输入和标签，没有form-horizontal和col-XX类