如何并排放置两个输入字段

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;
}

这是我的输出：

将它们并排放置的最佳方式是什么？

原文由 mur7ay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 应该为你做这件事。看起来您在列周围缺少 <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>

原文由 Nick Bull 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

以上应该适用于更大的分辨率。

原文由 Andrew Robinson 发布，翻译遵循 CC BY-SA 3.0 许可协议