HTML CSS＆Bootstrap导航条搜索宽度/自定义

使用自举/样式挣扎。我创建了一个带有搜索框和一些按钮的导航栏。HTML CSS＆Bootstrap导航条搜索宽度/自定义

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

id与搜索栏相比要比它默认的长一点。也许宽度被自动拧起来了？我不确定。

*我也有一个引导，选择在这个小提琴，但由于某些原因，它不会显示出来（我为它添加一个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>

来源

2016-06-13 Michael

如果您在桌面上工作，然后使用col-md或col-lg类，则您正在使用col-sm类，这些类用于移动等小型视窗设备。由于selectpicker类将display控件设置为none，所以select控件是隐藏的。 – Deep

你可以这样设置搜索框min-width：

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

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

来源

2016-06-13 16:31:15

HTML CSS＆Bootstrap导航条搜索宽度/自定义

回答

相关问题