Question

问题是我每行有3列，平板电脑大小我想要每行2列甚至是可能的，因为它在平板电脑大小中每行只有三列。

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col">

        </div>
        <div class="col-lg-4 col-md-6 col">

        </div>
        <div class="col-lg-4 col-md-6 col">

        </div>
    </div>
    <!--2nd row-->
    <div class="row">
        <div class="col-lg-4 col-md-6 col">
            <div class="card text-secondary">
                <img src="balinese.jpg" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Balinese Cat</h4>
                    <h5 class="card-text">The Balinese is a long-haired breed of domestic cat with Siamese-style point coloration and sapphire-blue eyes</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col">
            <div class="card text-secondary">
                <img src="manxs.jpg" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Manx Cat</h4>
                    <h5 class="card-text">The Manx cat is a breed of domestic cat (Felis catus) originating on the Isle of Man, with a naturally occurring mutation that shortens the tail</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col">
            <div class="card text-secondary">
                <img src="Sphynx.jpg" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Sphynx Cat</h4>
                    <h5 class="card-text">The Sphynx cat is a breed of cat known for its lack of coat (fur). It was developed through selective breeding, starting in the 1960s. The skin should have the texture of chamois, as it has fine hairs</h5>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以为平板电脑尺寸添加类col-sm-2，如下所示

<div class="col-md-6 col-sm-2"> Some Text </div>
<div class="col-md-6 col-sm-2"> Some Text </div>
<div class="col-md-6 col-sm-2"> Some Text </div>

这将在平板电脑视图中显示两列。

Answer 2

只需删除列类中的col部分即可。

在平板电脑（md屏幕）上，这将为您提供每行2列，并且在小于md的屏幕上，它们将叠加在一起。当然，在大（lg）或更大的屏幕上，您每行仍然有3列。

点击＆＃34;运行代码段＆＃34;在下面并扩展到完整页面进行测试：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6">
        col 1
        </div>
        <div class="col-lg-4 col-md-6">
        col 2
        </div>
        <div class="col-lg-4 col-md-6">
        col 3
        </div>
    </div>
    <!--2nd row-->
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="card text-secondary">
                <img src="https://placeimg.com/800/400/animals" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Balinese Cat</h4>
                    <h5 class="card-text">The Balinese is a long-haired breed of domestic cat with Siamese-style point coloration and sapphire-blue eyes</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card text-secondary">
                <img src="https://placeimg.com/800/400/animals" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Manx Cat</h4>
                    <h5 class="card-text">The Manx cat is a breed of domestic cat (Felis catus) originating on the Isle of Man, with a naturally occurring mutation that shortens the tail</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card text-secondary">
                <img src="https://placeimg.com/800/400/animals" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Sphynx Cat</h4>
                    <h5 class="card-text">The Sphynx cat is a breed of cat known for its lack of coat (fur). It was developed through selective breeding, starting in the 1960s. The skin should have the texture of chamois, as it has fine hairs</h5>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 3

这个问题很好地证明了为什么经常需要more than 12 col- units in a row。如您所见，使用单独的行会阻止您想要的响应式布局。

为所有列使用单个.row div。

https://www.codeply.com/go/uaQYUjFkd3

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col py-2">
            <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
              <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
              <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
            <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
            <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
            <div class="card text-secondary h-100">
                ..
            </div>
        </div>
    </div>
</div>

在Bootstrap中，这被称为Column Wrapping。来自文档：

如果在一行中放置的列数超过12列，则每组额外列将作为一个单元换行换行。

注意：我还添加h-100以使每张卡填充列的高度，并py-2提供一点垂直填充（列之间的间距）。

相关问题：
Bootstrap 3 - More than 12 columns in a row

平板电脑中的大屏幕2列中的三列

3 个答案: