我是twitter-bootstrap的新手，并尝试做一个与GPA相关的项目。当我减少浏览器的窗口大小时，这两个下拉框在每个中间的某个点处重叠。我需要避免重叠。 （我尝试在第二个下拉框中添加偏移但是没有用。）请有人帮助我克服这个问题。https://www.dropbox.com/s/d1vi17r2z0itc7e/screenshot%20for%20stackoverflow.jpg?dl=0
<div class="padding">
<div class="row">
<div class="col-xs-1 col-sm-offset-1">
<h5>1.</h5>
</div>
<!--<div class="col-xs-11 col-sm-4 col-md-6">-->
<div class="col-xs-10 col-sm-6">
<input type="text" id="element-1" class="form-control input-md" placeholder="Enter Subject Names">
</div>
<!--<div class="col-xs-1 col-sm-1">-->
<div class="col-xs-5 col-sm-1">
<div class="padding2">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select <span class="caret"></span> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">A+</a></li>
<li><a href="#">A</a></li>
<li><a href="#">A-</a></li>
<li><a href="#">B+</a></li>
<li><a href="#">B</a></li>
<li><a href="#">B-</a></li>
<li><a href="#">C+</a></li>
<li><a href="#">C</a></li>
<li><a href="#">C-</a></li>
<li><a href="#">D+</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li class="divider"></li>
<li><a href="#">Pass(No Credit)</a></li>
<li><a href="#">Not Eligible</a></li>
<li><a href="#">Absent</a></li>
<li><a href="#">E*</a></li>
<li><a href="#">E**</a></li>
</ul>
</div>
</div>
</div>
<!--<div class="col-xs-1 col-sm-1 col-md-1">-->
<div class="col-xs-5 col-sm-1">
<div class="padding2">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select <span class="caret"></span> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">No Credit</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
<强>编辑：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
@media (max-width: 480px) {
.col-xxs {
display:block;
float:none;
width: 100%
}
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-offset-1 col-xs-offset-1 col-xs-10 col-sm-10">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 col-xxs text-center">
<h5>1.</h5>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-5 col-xxs">
<input type="text" id="element-1" class="form-control input-md" placeholder="Enter Subject Names">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-3 col-xxs">
<button class="btn btn-default btn-block dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select <span class="caret"></span> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">A+</a></li>
<li><a href="#">A</a></li>
<li><a href="#">A-</a></li>
<li><a href="#">B+</a></li>
<li><a href="#">B</a></li>
<li><a href="#">B-</a></li>
<li><a href="#">C+</a></li>
<li><a href="#">C</a></li>
<li><a href="#">C-</a></li>
<li><a href="#">D+</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li class="divider"></li>
<li><a href="#">Pass(No Credit)</a></li>
<li><a href="#">Not Eligible</a></li>
<li><a href="#">Absent</a></li>
<li><a href="#">E*</a></li>
<li><a href="#">E**</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-3 col-xxs">
<div class="dropdown">
<button class="btn btn-default btn-block dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select <span class="caret"></span> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">No Credit</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>