代码之家 › 专栏 › 技术社区 › ailinmcc666

如何将搜索框放在div中间?

twitter-bootstrap-3 twitter-bootstrap css html

ailinmcc666 · 技术社区 · 6 年前

我有以下代码:

<div class="row">
<div class="col-xs-8 col-xs-offset-2">
    <div class="input-group">
        <div class="input-group-btn search-panel">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span id="search_concept">Search by</span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#hcn">HCN</a></li>
                <li><a href="#casenote">Casenote</a></li>
            </ul>
        </div>
        <input type="text" class="form-control" name="x" placeholder="Search">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
        </span>
    </div>
</div>

具有以下效力:

我一直试图做的,但失败的是,将这个内容居中,这样下拉框、文本框和按钮都是居中对齐的,并且彼此紧密相连。

有人能帮我吗?

1 回复 | 直到 6 年前

bjupreti 6 年前

替换 .input-group 用下面的css初始化css。

.input-group {
  display: flex;
  flex-direction: "row",
  justify-content: "center",
  align-items: "center"
}

我希望这能有帮助。快乐编码:)

推荐文章

Glyn · 如何使用jQuery更改动态创建的按钮<span>中的文本?

2 年前

Salman Abbas · 如何在导航栏切换中更改下拉菜单中链接的颜色

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Knownow · 通过导航显示背景

6 年前

Mona Coder · 删除Bootstrap 3上下拉菜单和下拉菜单之间的边框

6 年前

user9727963 · 引导和Internet Explorer 11问题

6 年前

Queen of the North · 无法更改输入表单宽度

6 年前

jaggs · 如何将java中创建的href链接传递到jsp页面

6 年前

Abu Ayyub · 引导中具有一个边框的多个输入元素

6 年前

espresso_coffee · 所选内容在我的引导/JQuery应用程序中不起作用?

6 年前