Question

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

我编写了如下代码（如果代码在下面是错误的，那么如何编写？）

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

我不确定为什么你需要为p断点中的每个sm设置一个包装器，但也许你需要它，所以我为每个col-md-12 col-sm-*使用p {1}}以便在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个cols用于中型和大型设备。这是因为bootstrap使用移动优先方法。所以你可以做这样的事情

<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-xs-12 代替 col-12

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

3 个答案: