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

【问题标题】：How to Place Two Input Fields Side-by-Side如何并排放置两个输入字段
【发布时间】：2016-12-12 01:59:39
【问题描述】：

一段时间以来，我一直试图并排放置两个输入字段，但我无法让它们真正内联。这是我的 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;
}

这是我的输出：

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

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

根据输出的大小，您可能需要使用不同的列大小。尝试设置col-sm-6 或col-xs-6 类。 col-md-6 在您的情况下可能很大。

【讨论】：