Question

如果屏幕是xs布局（bootstrap），我一直试图弄清楚如何显示药片。如果它是一个更大的设备，我想展示所有内容。有没有办法删除＆＃34;标签内容＆＃34; div上的类包括内容，如果设备大于phone-screen / bootstrap xs？

现在它只会显示活动标签窗格，如果我在更大的设备上。如果我使用手机大小，药片会起作用。

问题是，如果我在一台较大的设备上，如果我在一台小型设备上，那么如何显示所有内容？

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

Answer 1

通常，您需要使用@media来执行此类操作。 Bootstrap xs是一个小于768像素的屏幕尺寸。如果您想在屏幕为xs时更改网站中的内容，则需要使用

@media(max-width: 768px)
{

//Put your code here..


}

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

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

希望它可以帮到某人;）

/ J

Bootstrap药丸 - 如果移动设备显示所有内容（响应），显示药丸

2 个答案: