フォームと水平-col-XXクラスのない同じ行に入力してラベルを貼る

ラベルと入力を1行に入れたいと思っています。私は約form-horizontal、form-inlineを知っています。しかし、私はlabelとinputの上にいくつかのpのタグを持っていて、それらはすべてよく見えます。フォームと水平-col-XXクラスのない同じ行に入力してラベルを貼る

<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

出典

2016-12-22 user348173

使用CSSフレキシボックスで

ルック。同様に：

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

この情報がお役に立てば幸い！

出典

2016-12-22 05:18:36

ちょうど以下の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"> 
 

 
\t <!-- jQuery library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
\t <!-- Latest compiled JavaScript --> 
 
\t <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>

の下を参照してください。

出典

2016-12-22 05:19:31

フォームと水平-col-XXクラスのない同じ行に入力してラベルを貼る

答えて

関連する問題