如何並排放置兩個輸入字段

Question

我一直試圖將兩個輸入字段並排放置一段時間，而且我無法讓它們真正進入內聯。 這是我的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>

我也試圖利用Bootstrap，但我不能為我的生活讓它們並排排列。 這是相應的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

Bootstrap應該為你做這件事。 看起來你錯過了<div class="row">周圍的<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> 

以上內容應適用於更大的分辨率。