我试图寻找答案,但无济于事.基本上我想知道的是,如果有必要在Bootstrap 3中指定col-md-*值,或者你可以使用col-xs-12和col-sm-*并且有col-sm - *值指示col大小一直到某些大型显示器.
这看起来很简单(有col-sm会好的)但文档中也包含看似冗余的col-md-*值,例如这里(取自"示例:移动,平板电脑和桌面"下的" CSS部分中的"网格系统":
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
这里的任何澄清将不胜感激.谢谢!
我一直在寻找一个同样问题的例子,但我还没有运气.我正在尝试使用bootstrap.js在bootstrap中创建一个多级可折叠侧导航.
我的问题是我已经添加了第二级但是当我单击列表项以触发它打开时它会折叠整个菜单.当我重新打开菜单时,第二级菜单也会打开.我的代码如下:
<div class="sidebar-nav">
<p class="sidenav-header">Units and Lessons:</p>
<ul class="nav nav-list">
<li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary">
Content Areas
</span>
<ul class="nav nav-list collapse" id="content-areas">
<li><a href="#" title="Title">All</a></li>
<li><a href="#" title="Title">Urban Planning</a></li>
<li><a href="#" title="Title">Sustainability</a></li>
<li><a href="#" title="Title">Public Administration</a></li>
<li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"><a href="#" title="Title">Health</a>
<ul class="nav-secondary nav-list collapse" id="nav-health">
<li><a href="#" title="Title">Introduction</a></li>
<li><a href="#" title="Title">Lesson: What is Epilepsy?</a></li>
<li><a href="#" title="Title">Lesson: Pathology</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary">
Languages
</span>
<ul class="nav nav-list collapse" id="languages"> …