引导布局如何在不同的屏幕尺寸下工作

Question

我想在引导程序中构建一个页面。它在不同的屏幕上有不同的布局。

我写的代码如下（如果下面的代码错了，那怎么写呢？）

<div class="container-fluid">
    <div class="row">
        <!--Large screen starts here -->
        <div class="col-lg-12">
            <p class="page-top1"><small>Content 1</small></p>
            <p class="page-top2">Content 2</p>
            <p class="page-top3">Content 3</p>
        </div>
        <!--Large screen ends here -->
        <!--Medium screen starts here -->
        <div class="col-md-12">
            <p class="page-top1"><small>Content 1</small></p>
            <p class="page-top2">Content 2</p>
            <p class="page-top3">Content 3</p>
        </div>
        <!--Medium screen ends here -->
        <!--Small screem starts here -->
        <div class="col-sm-6">
            <p class="page-top1"><small>Content 1</small></p>
        </div>
        <div class="col-sm-3">
            <p class="page-top2">Content 2</p>
        </div>
        <div class="col-sm-3">
            <p class="page-top3">Content 3</p>
        </div>
        <!--Small scren ends here -->
    </div>
</div>

所以我想如果屏幕尺寸更大、中或小，那么 col-lg、col-md 或 col-sm 将自动选择。但这不会发生。无论屏幕大小如何，所有代码都在运行。

如果我必须为每个屏幕尺寸编写媒体查询，那么我应该使用哪一个？ Col-lg 或 col-md 或 col-sm？为什么？

我希望这可能是一个非常基本的愚蠢问题。但我只是想了解它。

编辑

感谢您提及重复。参考标记的重复问题，我做了以下更改。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-6 hidden-sm hidden-xs">
            <p class="page-top1"><small>Content 1</small></p>
        </div>
        <div class="col-lg-3 col-md-3 hidden-sm hidden-xs">
            <p class="page-top2">Content 2</p>
        </div>
        <div class="col-lg-3 col-md-3 hidden-sm hidden-xs">
            <p class="page-top3">Content 3</p>
        </div>
    </div>
</div>

效果很好。但是每个 p 之间有一些空间。如果那个空间不应该在那里，我需要做什么。参考图片

我还指定了 hidden-sm 和 hidden-xs。那么在移动屏幕中这个div应该被隐藏吧？为什么 div 仍然显示？

Answer 1

您不需要为每个断点重新创建每个元素，而是可以组合类。

<div class="container-fluid">
    <div class="row"> 
        <div class="col-lg-12 col-md-12 col-sm-12">
            <p class="page-top1 col-md-12 col-sm-6"><small>Content 1</small></p>
            <p class="page-top2 col-md-12 col-sm-3">Content 2</p>
            <p class="page-top3 col-md-12 col-sm-3">Content 3</p>
        </div>
    </div>
</div>

我不太确定为什么您需要在 sm 断点中为每个 p 提供一个包装器，但也许您需要它，所以我为每个 p 使用了 col-md-12 col-sm-*，这样在sm 断点，所有 p 将使用 12 列

Answer 2

应该是这样的：

<div class="container-fluid">
    <div class="row">
        <!--Large screen starts here -->
        <div class="col-lg-12 col-md-12 col-sm-12">
            <p class="page-top1"><small>Content 1</small></p>
            <p class="page-top2">Content 2</p>
            <p class="page-top3">Content 3</p>
        </div>
    </div>
</div>

Answer 3

Bootstrap 需要了解要应用哪些类。当您使用 col-md-12 之类的类时，对于中型和大型设备，该元素会自动占用 12 个列。发生这种情况是因为引导程序使用移动优先的方法。 所以你可以做这样的事情

<div class="container-fluid">
<div class="row">
    <div class="col-sm-12">
        <p class="page-top1"><small>Content 1</small></p>
        <p class="page-top2">Content 2</p>
        <p class="page-top3">Content 3</p>
    </div>    
</div>

col-sm-12 这将在小型、中型和大型设备上自动占用 12 列。 col-lg-12 col-sm-2 和 col-md-12 不用分开写。

参考Bootstrap-3 grid explanation

PS - 如果您使用的是 bootstrap4，那么请使用 col-12

而不是 col-xs-12