Bootstrap和Bootstrap-Select - Fit选择和其他元素以div宽度，100％宽度/高度 [英] Bootstrap and Bootstrap-Select - Fit Select and other elements to div width, 100% width/height
问题描述
1）我使用Bootstrap-Select来获得具有搜索功能的现代选择框，但没有
2）我已将行拆分为2列：2（选择）和10（Images / Map），但除非我将宽度从100％更改为更小，否则它们是重叠的，并且放在彼此的上面，而不是左右。
3）每个图像（将被替换为地图）设置为50％的高度和100％的宽度，但仍然看到浏览器的滚动条，它不是一个小的滚动空间。我想显示地图完全50％的高度（每个，所以100％总）没有滚动条。我有一个感觉，navbar的高度需要考虑吗？
请使用附加的jsFiddle方便！
只添加列可见性的边框，可以删除。
HTML
< div class =containerstyle =border：1px solid red;>
< div class =row>
< div class =col-md-2style =border：1px solid blue;>
< div class =form-horizontal>
< select class =selectpicker col-sm-12data-live-search =truetitle =Routes>
< option> 1路由A - WEST< / option>
< option> 2路线B - SOUTH< / option>
< option> 2路线B - NORTH< / option>
< option> 3很长的路由名C - SOUTH< / option>
< option> 3超长路由名C - NORTH< / option>
< option> 4路线D - EAST< / option>
< option> 4路由D - WEST< / option>
< option> 5极长的路由名称E - SOUTH< / option>
< option> 5极长的路由名称E - NORTH< / option>
< / select>
< / div>
< div class =col-md-10 canvasstyle =border：1px solid lime;>
< div>
< img src =http://designreviver.com/wp-content/uploads/2014/11/410316.jpgstyle =width：100％; height：50％;>
< / div>
< div>
< img src =http://designreviver.com/wp-content/uploads/2014/11/410316.jpgstyle =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;
}
选择它是一个好的做法，使用data-width =100％导致选择填充其父的空间，即bootstrap列。您也可以在初始化时通过javascript添加此选项。您可以在此处详细了解该选项和其他选项： https：//silviomoreto.github .io / bootstrap-select / options /＃core-options
使用.container或.container-fluid时，请确保按顺序保存类：.container .row .col-xx。混合在额外的divs可能成为你想要保持特定大小的元素的父母，可能会导致问题。
图片.img-responsive有一个很好的bootstrap类。我建议使用这个为您的图像。您可以在此处了解详情： http://getbootstrap.com/css/#images 。 / p>
这是一个更新的小调 https://jsfiddle.net/ mrLsveLf / 3 /
HTML
< nav class =navbar navbar-inverse navbar-static-top>
< div class =container>
< div class =navbar-header>
< a class =navbar-brandhref => Brand< / a>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< / div>
< div class =navbar-collapse collapseid =navbar>
< ul class =nav navbar-nav navbar-right>
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown>登录< b class =caret>< / b>< / a&
< ul class =dropdown-menu>
< li>嘿！< / li>
< / ul>
< / li>
< / ul>
< / div>
< / div>
< / nav>
< div class =container>
< div class =row>
< div class =col-xs-4>
< select class =selectpickerdata-live-search =truetitle =Routesdata-width =css-width>
< option> 1路由A - WEST< / option>
< option> 2路线B - SOUTH< / option>
< option> 2路线B - NORTH< / option>
< option> 3很长的路由名C - SOUTH< / option>
< option> 3超长路由名C - NORTH< / option>
< option> 4路线D - EAST< / option>
< option> 4路由D - WEST< / option>
< option> 5极长的路由名称E - SOUTH< / option>
< option> 5极长的路由名称E - NORTH< / option>
< / select>
< / div>
< div class =col-xs-8>
< img class =img-responsivesrc =http://designreviver.com/wp-content/uploads/2014/11/410316.jpgstyle =width：100％; height：50 ％;>
< img class =img-responsivesrc =http://designreviver.com/wp-content/uploads/2014/11/410316.jpgstyle =width：100％; height：50 ％;>
< / div>
< / div>
< / div>
I have a mixture of problems that I am running into.
1) I am using Bootstrap-Select to get a modern select box with search capabilities, but no matter what I try, I cannot seem to get the select to fill the col-span.
2) I have split the row into 2 columns: 2 (Select) and 10 (Images/Map), but unless I change the the widths from 100% to less, they are overlapping and are being placed on top of each other, instead of left-right.
3) Each image (will be replaced by a map) is set to 50% height and 100% width, but still I see the scrollbar for the browser, and its not a small scroll space either. I want to show the map to full 50% height (each, so 100% total) without the scrollbar. I have a feeling the navbar's height needs to be taken into consideration?
Please use the attached jsFiddle for convenience! Borders are added for column visibility only and can be removed.
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;
}
When using bootstrap-select it's good practice to use the data-width="100%" to cause the select to fill the space of it's parent i.e. bootstrap column. You can also add this option via javascript when you initialize it. You can read more about that and other options here: https://silviomoreto.github.io/bootstrap-select/options/#core-options
When using either .container or .container-fluid make sure you keep the classes in order: .container .row .col-x-x. Mixing in extra divs that might become the parents of elements you're trying to keep a specific size, might cause problems.
There's a great bootstrap class for images .img-responsive. I would suggest using this for your images. You can read more about that here: http://getbootstrap.com/css/#images.
Here's an updated fiddle 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>
这篇关于Bootstrap和Bootstrap-Select - Fit选择和其他元素以div宽度，100％宽度/高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
