Question

我正在制作一个包含某些字段的栏，我希望它看起来像这样：

但它看起来像这样：

如您所见，存在一些问题

该按钮不在同一行
元素未垂直对齐（文本略高于serch栏）

我正在使用Twitter Bootstrap和一些CSS，如果您想测试代码，我会为您提供Plunker（不要忘记将Plunker视图放入全屏或它不会显示相关内容。

你能帮我解决这些问题吗？

PS：语言是法语，我可以在必要时进行翻译：）

HTML代码

<hr/>
<div class="row">
    <div class="col-md-3">
        <span class="text-standard-bold">MON STATUT : </span>
        <span class="statut">Administrateur</span>
    </div>

    <div class="input-group col-md-3 recherche">
        <input type="search" class="form-control" placeholder="Rechercher un compte ..."/><br/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
        </span>
    </div>

    <div class="col-md-3">
        <button type="button" class="btn btn-nouveau">
            <span class="glyphicon glyphicon-plus"></span>
            <span class=""> AJOUTER UN UTILISATEUR</span>
        </button>
    </div>
</div>
<hr/>

CSS代码

* {
    border-radius: 0 !important;
}

.statut {
    font-size: 16px;
}

.recherche .input-group-addon {
    border-radius: 0;
    color: #FFF;
    background-color: #004392;
    cursor: pointer;
}

.recherche .input-group-addon:hover {
    color: #fdb813;
}

.recherche .form-control, .input-group-addon {
    border-style: solid;
    border-width: 1px;
    border-color: #004392;
}

.text-standard {
    font-size: 16px;
    color: rgb(1, 70, 148);
}

.text-standard-bold {
    font-size: 16px;
    color: rgb(1, 70, 148);
    font-weight: bold;
}

Answer 1

input-group课程为float:none。如果我们改变它将会起作用

<div class="row">
    <div class="col-md-3">
        <span class="text-standard-bold">MON STATUT : </span>
        <span class="statut">Administrateur</span>
    </div>

    <div class="input-group col-md-3 recherche" style="float:left;">
        <input type="search" class="form-control" ng-model="cc.search" placeholder="Rechercher un compte ..."/><br/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
        </span>
    </div>

    <!-- Nouveau compte -->
    <div class="col-md-3 pull-right">
        <button type="button" class="btn btn-nouveau" ng-click="cc.modeCreation = !cc.modeCreation">
            <span class="glyphicon glyphicon-plus"></span>
            <span class=""> AJOUTER UN UTILISATEUR</span>
        </button>
    </div>
</div>
<hr/>
   <style>
    * {
    border-radius: 0 !important;
}

.statut {
    font-size: 16px;
}

.recherche .input-group-addon {
    border-radius: 0;
    color: #FFF;
    background-color: #004392;
    cursor: pointer;
}

.recherche .input-group-addon:hover {
    color: #fdb813;
}

.recherche .form-control, .input-group-addon {
    border-style: solid;
    border-width: 1px;
    border-color: #004392;
}

.text-standard {
    font-size: 16px;
    color: rgb(1, 70, 148);
}

.text-standard-bold {
    font-size: 16px;
    color: rgb(1, 70, 148);
    font-weight: bold;
}
   </style>

Answer 2

将.input-group和.col-md-3类放在一起，打破.col-md-3类。我建议分开来。这将确保它适用于所有屏幕尺寸，例如当col-sm-*和col-xs-*被激活时。

此外，对于垂直对齐问题，您可以使用与文本框和按钮具有相同填充的.form-control-static。

<hr />
<div class="row">
    <div class="col-md-3">
        <p class="form-control-static">
            <span class="text-standard-bold">MON STATUT : </span>
            <span class="statut">Administrateur</span>
        </p>
    </div>
    <div class="col-md-3">
        <div class="input-group recherche">
            <input type="search" class="form-control" placeholder="Rechercher un compte ..."><br>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span>
            </span>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-nouveau">
            <span class="glyphicon glyphicon-plus"></span>
            <span class=""> AJOUTER UN UTILISATEUR</span>
        </button>
    </div>
</div>
<hr />

这是一个有效的演示：http://www.bootply.com/MyKe33IrUu

尝试将某些元素设为一行

2 个答案: