bootstrap-select内部引导网格和面板布局在窗口调整大小时变得太大

Question

我尝试使用bootstrap-select而不是常规的bootstrap select（＆lt; select＆gt; with form-control class），并且它很棒，直到我尝试调整页面大小。如果我让窗户变小而这是一个耻辱，那么selectpicker就不适合我的面板了。这是我的HTML：

<div class="col-md-4">
 <div class="panel panel-default">
  <div class="panel-heading">Basic information</div>
  <div class="panel-body">
  <div class="input-group">
    <span class="input-group-addon">Chain</span>
     <select class="form-control selectpicker" data-live-search="true"> 
     </select>
   </div>
 </div>
</div>

任何聪明的方法都可以在列/面板内进行选择对齐，即使在调整窗口大小时，选项选项中的文字太大（反之亦然）？它需要是动态的，因此您可以将屏幕大小调整为您想要的任何大小而不会破坏面板。图片展示问题：

编辑 - 页面的Bootstrap结构：

<div class="container-fluid">
<div class="row">
 <div class="col-md-4">
  <div class="panel panel-default">
     <div class="panel-heading">Panel 1</div>
     <div class="panel-body">
      <div class="input-group">
         <span class="input-group-addon">Normal select (works)</span>
           <select class="form-control"></select>
      </div>
      <div class="input-group">
         <span class="input-group-addon">Selectpicker (breaks panel)</span>
          <select class="form-control selectpicker" data-live-search="true"> 
      </select></div>
     </div>
     </div>
    </div>
     <div class="col-md-4">

      </div>
      <div class="col-md-4">
      </div>
  </div>
</div>

https://jsfiddle.net/qbnxf2zm/

Answer 1

这里的问题是选择框中的文字太多而浏览器想要全部显示。如果您不想全部展示，可以将$(window).load(function(){ $(".goog-logo-link").empty(); $('.goog-te-gadget').html($('.goog-te-gadget').children()); }) 包含在您允许的最大宽度的div中，因为.form-control类具有.form-control，它只会允许它走那么宽。

但是，我测试了你的代码，当我尝试它时，它会隐藏任何太长的输入。我需要更多代码才能理解为什么它不起作用。