2つの入力フィールドを並べて配置する方法

Question

私は2つの入力フィールドをいつか並べて配置しようとしていましたが、実際にインラインにすることはできません。ここに私のHTMLです：

<div class="container"> 
    <div class="form-group name1 col-md-6"> 
     <label for="exampleInputEmail1" class="formText">FIRST NAME:*</label> 
     <input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName"> 
    </div> 

    <div class="form-group name2 col-md-6"> 
     <label for="exampleInputEmail1" class="formText">LAST NAME:*</label> 
     <input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone"> 
    </div> 
</div> 

私もブートストラップを利用しようとしているが、私は私の人生のためにそれらが並んで整列することができません。ここでは、対応するCSSです：

.name1 { 
    float: left; 
} 

.name2 { 
    float: right; 
} 

#name { 
    width: 223.67px; 
    height: 40.25px; 
} 

.form-group { 
    margin-left: 5%; 
    margin-right: 5%; 
} 

.containerr { 
    display: inline-block; 
} 

これは私の出力である：

いただきましたそれらを並べて配置するための最良の方法？

Answer 1

ブートストラップでこれを行う必要があります。あなたは列の周り<div class="row">が欠落しているように見えます：

<div class="container"> 
    <div class="row"> 
     <div class="form-group name1 col-md-6"> 
      <label for="exampleInputEmail1" class="formText">FIRST NAME:*</label> 
      <input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName"> 
     </div> 

     <div class="form-group name2 col-md-6"> 
      <label for="exampleInputEmail1## Heading ##" class="formText">LAST NAME:*</label> 
      <input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone"> 
     </div> 
    </div> 
</div> 

Answer 2

あなたの出力の大きさから判断すると、あなたは別の列のサイズを使用する必要があります。 col-sm-6またはcol-xs-6クラスを設定してください。あなたのケースではcol-md-6が大きくなることがあります。

Answer 3

#name { 
 
    width: 223.67px; 
 
    height: 40.25px; 
 
} 
 

 
.form-group { 
 
    display: inline-block; 
 
    width: calc(50% - 1px); 
 
    padding: 0 !important; 
 
} 
 

 
.container { 
 
    display: inline-block; 
 
    width: 90%; 
 
    margin-left: 5% !important; 
 
    margin-right: 5% !important; 
 
} 
 

 
.form-control { 
 
    margin: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="form-group name1 col-md-6"> 
 
     <label for="exampleInputEmail1" class="formText">FIRST NAME:*</label> 
 
     <input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName"> 
 
    </div> 
 

 
    <div class="form-group name2 col-md-6"> 
 
     <label for="exampleInputEmail1" class="formText">LAST NAME:*</label> 
 
     <input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone"> 
 
    </div> 
 
</div>

上記大きな解像度で動作しなければなりません。