引导网格内的引导选择和面板布局在窗口调整大小时变得太大

Question

我正在尝试使用 bootstrap-select 而不是常规的 bootstrap select ( with form-control 类)，在我尝试调整页面大小之前，它非常棒。如果我使窗口变小，那么选择器不再适合我的面板，这是一种耻辱。这是我的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>

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

编辑 - 页面的引导结构：

<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

这里的问题是选择框中的文本太多，浏览器想要全部显示。如果您不想全部显示，您可以将 .form-control 包装在您允许的最大宽度的 div 中，并且由于 .form-control 类具有 width: 100% 它只会允许它达到那个宽度。

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