Question

使用引导程序/样式进行挣扎。我创建了一个带有搜索框和一些按钮的导航栏。

我不能为我的生活弄清楚如何自定义搜索栏本身的宽度。我可以设置一个固定的宽度，但我想尽可能使用网格系统，以便它具有响应性。

id就像搜索栏一样，比默认的更长。也许宽度是自动拧紧的东西？我不确定。

*我也有一个Bootstrap-Select这个小提琴，但由于某种原因它不会出现（我确实为它添加了一个cdn参考..哦，好吧）

<nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="275" style="margin-bottom:5px">
  <div class="row">
    <div class="col-sm-12">
      <form action="#" class="navbar-form navbar-left" role="search" id="searchForm">
        <div class="input-group">
          <input type="text" class="form-control input-sm" placeholder="Search..." name="searchTerms" />
          <span class="input-group-btn">
                                <button type="submit" class="btn btn-default-grey btn-sm"><i class="glyphicon glyphicon-search"></i></button>
                                <select class="selectpicker show-tick " id="searchDate" name="searchDate" data-style="btn btn-default-grey btn-sm" data-width="fit">
                                    <option id="anytime" value="anytime">Any Time</option>
                                    <option data-divider="true"></option>
                                    <option id="30days" value="30days">Last 30 Days</option>
                                    <option id="60days" value="60days">Last 60 Days</option>
                                    <option id="90days" value="30days">Last 90 Days</option>
                                </select>
                                <button type="button" class="btn btn-sm btn-link">Advanced</button>
                            </span>
        </div>
      </form>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <a href="#" class="btn btn-danger btn-sm">
            <i class="glyphicon glyphicon-pencil adjust-left" aria-hidden="true"></i> Some Button
          </a>
        </div>
      </form>
    </div>
  </div>
</nav>

Answer 1

您可以像这样设置搜索框的min-width：

.form-control.input-sm { 
    min-width: 300px;
}

我分叉你的代码并在这里创建了一个小提琴：https://jsfiddle.net/bxqj3q8g/

HTML CSS＆amp; Bootstrap导航栏搜索宽度/自定义

1 个答案: