引导药丸 - 如果移动设备显示所有内容（响应式），则显示药丸答案

【问题标题】：Bootstrap pills - show pills if mobile device else show all content (responsive)引导药丸 - 如果移动设备显示所有内容（响应式），则显示药丸
【发布时间】：2014-07-31 21:16:20
【问题描述】：

我一直试图弄清楚如果屏幕是 xs 布局（引导程序），如何显示药丸。如果设备更大，我想显示所有内容。如果设备比 phone-screen/bootstrap xs 大，有没有办法删除 div 上的“tab-content”类，包括内容？

现在，如果我在更大的设备上，它只会显示活动的选项卡窗格。如果我使用手机尺寸，药片就可以工作。

问题是如果我在更大的设备上如何显示所有内容，如果我在小型设备上如何显示药片？

<div id="content">
    <h1>TEST PILLS</h1>
    <ul id="pills" class="navbar-toggle nav nav-pills" data-tabs="pills">
        <li class="active"><a href="#red" data-toggle="tab">RED</a></li>
        <li><a href="#orange" data-toggle="tab">ORGANGE</a></li>
    </ul>
    <div id="my-pills" class="tab-content ">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
    </div>
</div>

【问题讨论】：

标签： twitter-bootstrap responsive-design nav-pills

【解决方案1】：

一般你需要使用@media 来做这种事情。 Bootstrap xs 是小于 768 像素的屏幕尺寸。如果您想在屏幕为 xs 时更改网站中的内容，您需要使用

@media(max-width: 768px)
{

//Put your code here..


}

例如，您可以display:none 表示您想要隐藏的内容，display:block 表示您想要显示的内容。

【讨论】：

我知道 display none 只是一个例子.....但是如果有人只想为移动设备（xs）显示或隐藏，他们总是可以使用类 visible-xs 或 hidden -xs

【解决方案2】：

好的一种解决方案（如果您使用淘汰赛）是使用模板绑定（如果您不想让您的标记过于混乱）。

<div id="content">
    <h1>Test</h1>
    <div class="visible-xs">
        <ul id="pills" class="navbar-toggle nav nav-pills nav-justified pull-left" data-tabs="pills">
            <li class="active"><a href="#person" data-toggle="tab">Person</a></li>
            <li><a href="#course" data-toggle="tab">Course</a></li>
        </ul>
        <div id="my-pills" class="tab-content" style="clear: both">
            <div id="person" class="tab-pane active" data-bind="template: {name: 'person-temp', foreach: listOfPersons}"></div>
            <div id="course" class="tab-pane" data-bind="template: {name: 'course-temp', foreach: listOfCourses}"></div>
        </div>
    </div>
    <div class="visible-sm visible-md visible-lg">
        <div id="person" class="tab-pane active" data-bind="template: {name: 'person-temp', foreach: listOfPersons}"></div>
        <div id="course" class="tab-pane" data-bind="template: {name: 'course-temp', foreach: listOfCourses}"></div>
    </div>
</div>

<script type="text/html" id="person-temp">
    <div>
        <h1 data-bind="text: name"></h1>
        <p>hej Person(s)</p>
    </div>
</script>
<script type="text/html" id="course-temp">
    <div>
        <h1 data-bind="text: name"></h1>
        <p>hej hej</p>
    </div>
</script>

希望它对某人有所帮助；）

【讨论】：