Question

我正在尝试使用Twitter Bootstrap在同一行上显示两个注册字段。

<div class="form-group required">
    <label class="col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label>
    <div class="col-sm-10">
        <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" />
        <?php if ($error_firstname) { ?>
            <div class="text-danger"><?php echo $error_firstname; ?></div>
        <?php } ?>
    </div>
</div>
<div class="form-group required">
    <label class="col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label>
    <div class="col-sm-10">
        <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" />
        <?php if ($error_lastname) { ?>
            <div class="text-danger"><?php echo $error_lastname; ?></div>
        <?php } ?>
    </div>
</div>

我该怎么做？

Answer 1

在bootstrap中，你可以交替嵌套列和行，这应该是：

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="form-group required">
            <label class="col-xs-12 col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label>
            <div class="col-xs-12 col-sm-10">
                <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" />
                <?php if ($error_firstname) { ?>
                    <div class="text-danger"><?php echo $error_firstname; ?></div>
                <?php } ?>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="form-group required">
            <label class="col-xs-12 col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label>
            <div class="col-xs-12 col-sm-10">
                <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" />
                <?php if ($error_lastname) { ?>
                    <div class="text-danger"><?php echo $error_lastname; ?></div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

Answer 2

只需更改包含输入元素的引导类：

＆＃13;

compile 'io.realm:realm-android:0.87.4'

＆＃13;

这是jsfiddle： https://jsfiddle.net/DTcHh/23304/

Answer 3

可以有更多的解决方案在行中有2个输入字段，它们可以在一行内。您可以在父div上使用 display flex 。

<强> HTML

        <div class="contianer">
          <div class="row">
            <input type="text" placeholder="field 1" class="">
          </div>
          <div class="row">
            <input type="text" placeholder="field 2" class="">
          </div>
        </div>

        <br><br><br><br>

        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="form-group required">
                    <label class="col-xs-12 col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label>
                    <div class="col-xs-12 col-sm-10">
                        <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" />
                        <?php if ($error_firstname) { ?>
                            <div class="text-danger"><?php echo $error_firstname; ?></div>
                        <?php } ?>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6">
                <div class="form-group required">
                    <label class="col-xs-12 col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label>
                    <div class="col-xs-12 col-sm-10">
                        <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" />
                        <?php if ($error_lastname) { ?>
                            <div class="text-danger"><?php echo $error_lastname; ?></div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
        </div>

<强> CSS

        .contianer {
          display: flex;
          flex-direction: row;
          margin-left: 30px;
          margin-top: 50px;
        }

        .row {
          flex: 1 1 auto;
          margin-left: 5px;
        }

一行中有两个输入字段

3 个答案: