Bootstrap 和 Bootstrap-Select - 使 Select 和其他元素适合 div 宽度，100% 宽度/高度

Question

我遇到了各种各样的问题。

1) 我正在使用 Bootstrap-Select 来获得一个具有搜索功能的现代选择框，但无论我尝试什么，我似乎都无法让选择来填充 col-span。

2) 我已将该行分成 2 列：2（选择）和 10（图像/地图），但除非我将宽度从 100% 更改为更小，否则它们会重叠并被放置在每个列的顶部其他，而不是左右。

3) 每个图像（将被地图替换）设置为 50% 的高度和 100% 的宽度，但我仍然看到浏览器的滚动条，而且它的滚动空间也不小。我想在没有滚动条的情况下将地图显示为 50% 的高度（每个高度为 100%）。我觉得需要考虑导航栏的高度？

为方便起见，请使用随附的 jsFiddle！ 添加边框仅用于列可见性，可以删除。

HTML

<div class="container" style="border: 1px solid red;">
  <div class="row">
    <div class="col-md-2" style="border: 1px solid blue;">
      <div class="form-horizontal">
        <select class="selectpicker col-sm-12" data-live-search="true" title="Routes">
          <option>1 Route A - WEST</option>
          <option>2 Route B - SOUTH</option>
          <option>2 Route B - NORTH</option>
          <option>3 Very Long Route Name C - SOUTH</option>
          <option>3 Very Long Route Name C - NORTH</option>
          <option>4 Route D - EAST</option>
          <option>4 Route D - WEST</option>
          <option>5 An Extremely Long Route Name E - SOUTH</option>
          <option>5 An Extremely Long Route Name E - NORTH</option>
        </select>
      </div>
      <div class="col-md-10 canvas" style="border: 1px solid lime;">
        <div>
          <img src="http://designreviver.com/wp-content/uploads/2014/11/410316.jpg" style="width:100%; height:50%;">
        </div>
        <div>
          <img src="http://designreviver.com/wp-content/uploads/2014/11/410316.jpg" style="width:100%; height:50%;">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

html, body, .container, .row, .canvas {
  height: 100%;
}

.canvas {
  width: 100%;
  height: 100%;
}

.selectpicker {
  padding-left:5px;
  padding-right:5px;
}

.navbar {
  margin-bottom: 0 !important;
}

JSFiddle DEMO

Answer 1

当使用 bootstrap-select 时，最好使用 data-width="100%" 来使 select 填充其父列的空间，即 bootstrap 列。您也可以在初始化时通过 javascript 添加此选项。您可以在此处阅读有关该选项和其他选项的更多信息：https://silviomoreto.github.io/bootstrap-select/options/#core-options

使用 .container 或 .container-fluid 时，请确保保持类的顺序：.container .row .col-x-x。混合可能成为您试图保持特定大小的元素的父元素的额外 div 可能会导致问题。

有一个很棒的图像 .img-responsive 引导类。我建议将其用于您的图像。您可以在此处阅读更多相关信息：http://getbootstrap.com/css/#images。

这是一个更新的小提琴https://jsfiddle.net/mrLsveLf/3/

HTML

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="">Brand</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>


    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sign in <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>Hey!</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
      <div class="col-xs-4">
         <select class="selectpicker" data-live-search="true" title="Routes" data-width="css-width">
            <option>1 Route A - WEST</option>
            <option>2 Route B - SOUTH</option>
            <option>2 Route B - NORTH</option>
            <option>3 Very Long Route Name C - SOUTH</option>
            <option>3 Very Long Route Name C - NORTH</option>
            <option>4 Route D - EAST</option>
            <option>4 Route D - WEST</option>
            <option>5 An Extremely Long Route Name E - SOUTH</option>
            <option>5 An Extremely Long Route Name E - NORTH</option>
          </select>
      </div>
    <div class="col-xs-8">
      <img class="img-responsive" src="http://designreviver.com/wp-content/uploads/2014/11/410316.jpg" style="width:100%;height:50%;">
      <img class="img-responsive" src="http://designreviver.com/wp-content/uploads/2014/11/410316.jpg" style="width:100%;height:50%;">
     </div>
</div>
</div>