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

Question

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

在this answer之后，我成功创建了一个类似于我想要的布局，其中包含输入字段左侧的“插件”图标（see code here）。

但是：我不希望输入字段附近有图标。

以下代码控制输入字段：

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

问题是删除<span class="input-group-addon">...</span>以删除图标，使输入字段缩小到较小的尺寸并松散圆边（这不太重要。{{3 }}）。

当然，在“输入组”中包装单个输入字段是没有意义的。但是删除“input-group”包装会导致输入字段扩展并进入一个新行（see code here）。

在查看Bootstrap.css后，我尝试创建一个新的css类，它模仿input-group类的相关代码。这会在导航栏中内联输入字段，但仍然不会扩展以占用所有可用空间（see code here）。

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

所需的浏览器兼容性：Chrome，Firefox，IE8 +

Answer 1

好吧，大多数人没有使用必须设计表，但在99年我开始时，表创建了布局，我们使用spacer .gifs和各种垃圾进行设计。当你有一个display：table表上的容器和一个display：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>

Answer 2

替换为这个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>

  

努力工作以达到您的要求。希望你欣赏：）

Answer 3

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

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

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