Bootstrap Inline下拉菜单的宽度不正确

时间：2016-02-16 18:07:20

标签： html css twitter-bootstrap

我有两个简单的下拉菜单，包含Bootstrap v3。我想要它，以便它们以宽度并排显示并利用网格。

但似乎宽度保持不变。我是这个意思：

＆＃13;
＆＃13; 
.menuList > div.dropdownInline {
  display: inline-block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="menuList">
<div class="dropdown dropdownInline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">

    <div class="row">
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="alert alert-warning" role="alert">
          Warning!
        </div>
      </div>
      <div class="col-md-6">
        <div class="alert alert-danger" role="alert">
          Danger!
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-info" role="alert">What an informatical message.</div>
      </div>
    </div>


  </div>
</div>

<!-- SECOND DROPDOWN -->

<div class="dropdown dropdownInline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

  </div>
</div></div>
<hr />
<h1>Without inline... </h1>

<div class="menuList">
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">

    <div class="row">
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="alert alert-warning" role="alert">
          Warning!
        </div>
      </div>
      <div class="col-md-6">
        <div class="alert alert-danger" role="alert">
          Danger!
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-info" role="alert">What an informatical message.</div>
      </div>
    </div>


  </div>
</div>

<!-- SECOND DROPDOWN -->

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

  </div>
</div></div>
＆＃13;
＆＃13;
＆＃13;

你是否看到没有内联...下拉延伸到一个很好的宽度但是... ...它...（顶级菜单）......它变得挤压？而且一个人甚至没有展示蓝色面板。

我做错了什么？

2 个答案:

答案 0 :(得分：2)

你可以设置菜单的宽度

.dropdown-menu{
  width:400px;//or whatever you want
}

检查一下 Plunker

.dropdowm-menu与其内容一样小 所以你可以像上面那样修复它或设置它的子元素的宽度。

答案 1 :(得分：0)

.menuList > div.dropdownInline {
  display: inline-block;
}
.dropdown button{ margin-top:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="menuList">
<div class="dropdown dropdownInline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">

    <div class="row">
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="alert alert-warning" role="alert">
          Warning!
        </div>
      </div>
      <div class="col-md-6">
        <div class="alert alert-danger" role="alert">
          Danger!
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-info" role="alert">What an informatical message.</div>
      </div>
    </div>


  </div>
</div>

<!-- SECOND DROPDOWN -->

<div class="dropdown dropdownInline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

  </div>
</div></div>
<hr />
<h1>Without inline... </h1>

<div class="menuList">
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1" style="max-width:1200px; padding: 10px; border: 1px solid #dddddd;">

    <div class="row">
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
      <div class="col-md-3">
        <input type="text" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="alert alert-warning" role="alert">
          Warning!
        </div>
      </div>
      <div class="col-md-6">
        <div class="alert alert-danger" role="alert">
          Danger!
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-info" role="alert">What an informatical message.</div>
      </div>
    </div>


  </div>
</div>

<!-- SECOND DROPDOWN -->

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" style="max-width:850px; padding: 10px; border: 1px solid #dddddd;" aria-labelledby="dropdownMenu2">


    <div class="row">
      <div class="col-md-12">
        <div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div>
      </div>
    </div>

  </div>
</div></div>

只需添加

相关问题
最新问题