Bootstrap轮播仅适用于移动分辨率

时间:2019-01-11 17:24:32

标签: html css twitter-bootstrap bootstrap-4 carousel

enter image description here

有人可以给我一个例子来说明如何使其仅在移动设备上(不超过576像素)满足团队页面的工作。它应该是没有指示器或控件的轮播滑块。我已经使所有其他分辨率看起来一切正常,但不知道如何仅在移动分辨率上实现轮播滑块?这是代码:

<section class="container-fluid">
    <div class="row about-header">
        <h1 class="col-12 col-sm-4 d-flex justify-content-center align-items-center about-title">MEET THE TEAM</h1>
    </div>

    <div class="row">
        <div class="col-12 meet-team">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee1@1366.png" alt="employee1-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">#####   #######</span><br />
                    <em class="employee-title">CEO</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,<br />
                        consectetur adipiscing elit, sed do<br />
                        eiusmod tempor incididunt. <br />
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
            <div class="col-12 group">
                <h2 class="group-title">GROUP</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-6 col-sm-3">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee1@1366.png" alt="employee1-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">##### ######</span><br />
                    <em class="employee-title">Accounts Exec</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt.
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
        </div>
        <div class="col-6 col-sm-3">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee2@1366.png" alt="employee2-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">#####  ######</span><br />
                    <em class="employee-title">Operations Manager</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt.
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
        </div>
        <div class="col-6 col-sm-3">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee3@1366.png" alt="employee3-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">####  #####</span><br />
                    <em class="employee-title">Accounts Manager</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt.
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
        </div>
        <div class="col-6 col-sm-3">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee4@1366.png" alt="employee4-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">##### ######</span><br />
                    <em class="employee-title">Accounts Apprentice</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt.
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
        </div>
    </div>
</section>

0 个答案:

没有答案