我有5个dropdrowns，右角的一列水平排列在同一行。在下一行中，我希望有更多的下拉列表，但我无法正确定位，因为右侧的列宽度为500px;
Example:
--------- --------- --------- --------- ---------
dropdown1 dropdown2 dropdown3 dropdown4 dropdown5 column
--------- --------- --------- --------- --------- ---------
| Ads |
| |
>I want to have a drop down here | |
--------- --------- --------- --------- | |
dropdown1 dropdown2 dropdown3 dropdown4 | |
| |
| |
| |
| |
| |
| |
| |
| |
---------
But its getting positioned here >>
以下是我的尝试：
<div class="starter-template">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Job</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Employer</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Referee</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Job fair & Events</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">My RTH</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2 ad-block-right text-center" style="width:210px; height: 500px; border: thin black; border-style: dotted">
Advertisements
</div>
</div>
<!--@@@@@@@@@@@@@ NESTED ROW NOT WORKING @@@@@@@@@@@-->
<div class="row">
<div class="starter-template">
<div class="col-xs-6 col-sm-6">
<div class="">Search all jobs</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
你的结构不对。首先使用row，然后在row内与col-sm-8和col-sm-4分开（此处为广告列）。在col-sm-8内使用row来分隔掉落的行数
<div class="starter-template">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Job</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Employer</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Referee</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Job fair & Events</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">My RTH</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
<li><a href="#">Reason 4</a></li>
</ul>
</div>
</div>
</div>
<!--@@@@@@@@@@@@@ NESTED ROW NOT WORKING @@@@@@@@@@@-->
<div class="row">
<div class="starter-template">
<div class="col-xs-6 col-sm-6">
<div class="">Search all jobs</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-2 ad-block-right text-center" style="width:210px; height: 500px; border: thin black; border-style: dotted">
Advertisements
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：1)
这是您需要的基本骨架：
<div class=row>
<div class=col-md-10>
<div class="row">
<div class=col-md-2>
dropdown1
</div>
<div class=col-md-2>
dropdown2
</div>
<div class=col-md-2>
dropdown3
</div>
<div class=col-md-2>
dropdown4
</div>
<div class=col-md-2>
dropdown5
</div>
</div>
<div class="row">
<div class=col-md-2>
dropdown1
</div>
<div class=col-md-2>
dropdown2
</div>
<div class=col-md-2>
dropdown3
</div>
<div class=col-md-2>
dropdown4
</div>
</div>
</div>
<div class=col-md-2>
// your ads here
</div>
</div>