Question

我是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>

Answer 1

<强>编辑：

＆＃13;

<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>

＆＃13;

Twitter-Bootstrap下拉框重叠

1 个答案: