1

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

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

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

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

2 回答 2

1

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

@media(max-width: 768px)
{

//Put your code here..


}

例如，您可以针对display:none要隐藏display:block的内容和要显示的内容。

于 2014-07-31T21:24:56.227 回答
1

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

<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

于 2014-07-31T21:57:31.213 回答