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="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

＆＃13;

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

＆＃13;

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

＆＃13;

上述内容适用于较大的分辨率。

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

3 个答案: