导航栏中的引导输入，selectize.js 未扩展答案

【问题标题】：bootstrap input in navbar with selectize.js not expanding导航栏中的引导输入，selectize.js 未扩展
【发布时间】：2015-04-27 07:52:08
【问题描述】：

我正在尝试使导航栏中的 selectize.js 输入更大，但应用了 selectize 的 css 并且它忽略了输入大类。我什至尝试手动设置元素的样式宽度，但它被覆盖了。

导航栏和按钮是标准引导程序：

<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="#">brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a  href="#profile">Home</a></li>
            <li><a href="#browse">Browse</a></li>

            <li id="friendRequests" class="dropdown"><a id="anw" href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-smile-o fa-lg"></i>

            </a>
                <ul  class="dropdown-menu">

                </ul>
            </li>

            <li><a id ="messagesLink" href="#messages"><i class="fa fa-envelope-o fa-lg"></i>                  
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" id="searchBox" class="" placeholder="search">
                </div>
                <button type="submit" id="searchButton" class="btn btn-default color3">Go</button>
            </form>
            <img  src="" class="img-responsive navbar-brand">

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a >Settings</a></li>
                    <li class="divider"></li>
                    <li><a href="#logout">Logout</a></li>
                </ul>
            </li>
            </ul>
    </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

然后我启动 selectize.js ：

    $(document).ready(function(){
   $('#searchBox').selectize({
            valueField: 'tagName',
            labelField: 'tagName',
            searchField: 'tagName',
            maxItems: 1,
   load: function(query, callback) {                                 }});
});

按照selectize的github中的建议，通过注释掉溢出来修复输入显示高于按钮的问题，如下所示：

    .selectize-input {
  border: 1px solid #cccccc;
  padding: 6px 12px;
  display: inline-block;
  width: 100%;
/*  overflow: hidden;*/
  position: relative;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
 border-radius: 4px;
}

但我不确定应该更改什么属性以使输入更大。

您可以在这里查看 jsfiddle：http://jsfiddle.net/arisalexis/rncujmnk/

【问题讨论】：

标签： javascript css twitter-bootstrap selectize.js

【解决方案1】：

如果我理解正确，您想增加搜索框输入的宽度。

您看到的输入是由 selectize.js 创建的。因此，您无法通过将类添加到您在 html 中的输入来控制大小。相反，您必须像这样通过 CSS 定位动态添加的输入：

.selectize-control.single .selectize-input input {
    width: 150px!important;
}

您需要使用!important 覆盖通过脚本添加的宽度。根据您的需要调整width。

Working Example

【讨论】：