Bootstrap 3 Navbar中的灵活宽度输入字段

I'm trying to create a navigation bar which contains an input field. I would like the input field to occupy all available space in the navigation bar.

我正在尝试创建一个包含输入字段的导航栏。我希望输入字段占用导航栏中的所有可用空间。

Following this answer, I successfully created a layout similar to what I want, which contains an "addon" icon to the left of the input field (see code here).

根据这个答案,我成功地创建了一个类似于我想要的布局,其中包含输入字段左侧的“插件”图标(请参阅此处的代码)。

But: I don't want the icon near the input field.

但是:我不希望输入字段附近的图标。

The following code controls the input field:

以下代码控制输入字段:

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="input-group">
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

The problem is that removing <span class="input-group-addon">...</span> to get rid of the icon, makes the input field contract to a smaller size and loose the rounded edges (which is less important. see code here).

问题是删除 ... 以摆脱图标,使输入字段缩小到较小的尺寸并松散圆边(这不太重要) 。见这里的代码)。

Of course it doesn't make sense to wrap a single input field in an "input-group". But removing the "input-group" wrapper causes the input field to expand and break into a new line (see code here).

当然,在“输入组”中包装单个输入字段是没有意义的。但是删除“input-group”包装会导致输入字段扩展并进入一个新行(请参阅此处的代码)。

After looking at Bootstrap.css I tried to create a new css class which mimics the relevant code of the input-group class. This brings back the input field inline in the navbar, but still does not make it expand to occupy all available space (see code here).

在查看Bootstrap.css后,我尝试创建一个新的css类,它模仿输入组类的相关代码。这会在导航栏中将输入字段带回内联,但仍然不会使其扩展以占用所有可用空间(请参阅此处的代码)。

My question is: How do I get the layout I want without the icon?
Bonus: Why are the "input-group" and the icon making the input field expand?

我的问题是:如何在没有图标的情况下获得我想要的布局?额外奖励:为什么“输入组”和输入字段的图标会扩展?

Required browser compatibility: Chrome, Firefox, IE8+

所需的浏览器兼容性:Chrome,Firefox,IE8 +

3 个解决方案

#1

Well, most folks didn't used have to design with tables, but in 99 when I began, tables created the layouts and we used spacer .gifs and all kinds of crap to design with. When you have a display:table on the container and a display:table-cell on the contents inside it, since the .form-control is empty there has to be something else to force the width of the element to take up the space, or it's going to act like an empty cell. So you have to have an empty span with some padding on it to force it.

好吧,大多数人没有使用必须设计表,但在99年我开始时,表创建了布局,我们使用spacer .gifs和各种垃圾进行设计。当你有一个显示:容器上的表和一个显示:table-cell上面的内容,因为.form-control是空的,必须有别的东西来强制元素的宽度占用空间,或者它将像一个空单元格。所以你必须有一个空的跨度,上面有一些填充物来强迫它。

http://jsbin.com/aXOZEXi/1 -- Bootstrap 3.0 - 3.1

http://jsbin.com/aXOZEXi/2/edit -- Bootstrap 3.2

.test {
  display:table;
}

.test > .form-control {
  display: table-cell;
  margin-left:-3px;
}

.test > span {
  display: table-cell;
  width:1%;
  padding:0 3px;
}

HTML

<form class="navbar-form">
  <div class="form-group" style="display:inline;">
    <div class="test">
      <span><!--shim--></span>
      <input type="text" class="form-control">
    </div>
  </div>
</form>

#2

Replace with this html: (made changes to glyphicon glyphicon-search and background-color, border of input-group-addon) Made the round edges too :)

替换为这个html :(对glyphicon glyphicon-search和background-color进行了更改,输入-group-addon的边框)也制作圆边:)

<div class="container">

<nav class="navbar navbar-default" role="navigation">
    <div class="container">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Some Brand</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar-collapsible">

        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>

        <div class="navbar-form navbar-right btn-group">
            <button type="button" class="btn btn-default">Button 1</button>
            <button type="button" class="btn btn-default">Button 2</button>
            <button type="button" class="btn btn-default">Button 3</button>
        </div>

        <form class="navbar-form">
            <div class="form-group" style="display:inline;">
                <div class="input-group">
                  <span class="input-group-addon" style="background-color:transparent; border:none"><span class=""></span></span>
                  <input type="text" class="form-control" style="border-bottom-left-radius: 4px;border-top-left-radius: 4px;">
                </div>
            </div>
        </form>

    </div>

</div>
</nav>
</div>

Worked really hard to get to what you require. hope you appreciate :)

努力工作到达你需要的东西。希望你欣赏:)

#3

This will get you pretty much where you want to be

这将让你几乎成为你想要的地方

<div class="form-group" style="display:inline;">
    <div class="input-group col-lg-6 col-md-5 col-sm-3 center-block col-xs-12">
        <input class="form-control" type="text" placeholder="Search">
    </div>
</div>

It will not fill exactly all the space but it will fill most of it and will center the search box so it does not look out of place. Added more dynamic column sizing extra small screen uses a dropdown menu so I re-sized the box to fit the screen. to build a fully responsize page as you are describing you should probably nest everything inside a grid because col-?-? is not a fixed width it is a percentage width based on it's container.

它不会填充所有空间,但它将填充大部分空间并将搜索框居中,因此它看起来不合适。添加了更多动态列大小超小屏幕使用下拉菜单,所以我重新调整框大小以适应屏幕。如你所描述的那样建立一个完全负责的页面你可能应该将所有内容嵌入网格中,因为col - ? - ?不是固定宽度,它是基于它的容器的百分比宽度。