1

画面が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>
4

2 に答える 2

1

一般に@media、この種のことを行うには を使用する必要があります。Bootstrap xs は、768 ピクセルより小さい画面サイズです。画面が xs のときに Web サイト内のものを変更したい場合は、使用する必要があります

@media(max-width: 768px)
{

//Put your code here..


}

たとえばdisplay:none、隠したいdisplay:blockものと見せたいものを区別できます。

于 2014-07-31T21:24:56.227 に答える
1

OK 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 に答える