html 在同一行中生成许多列-前端Bootstrap 5

我试着让10列的响应与Bootstrap 5在同一行。5或6列后，他们自动返回到行。
如果我使用类“col-1”，他们会停止“responsive”，并且不会使用屏幕的整个宽度（下面的截图）。
你现在能解决吗？谢谢！
我用这个（乘以10）：

<div class="row">
    <div class="col">
      <div class='card'>
       <div class='card-body'>
        <h5 class='card-title'>TITRE</h5>
        <p class='card-text'>TEXT</p>
        <p class='card-text'>text</a>
       </div>
     </div>
    </div>
    <div class="col">
          <div class='card'>
       <div class='card-body'>
        <h5 class='card-title'>TITRE</h5>
        <p class='card-text'>TEXT</p>
        <p class='card-text'>text</a>
       </div>
     </div>
    </div>
    <div class="col">
          <div class='card'>
       <div class='card-body'>
        <h5 class='card-title'>TITRE</h5>
        <p class='card-text'>TEXT</p>
        <p class='card-text'>text</a>
       </div>
     </div>
    </div>
  </div>

Screenshot for understand what i mean
With col-1 class

您需要使用col-1而不是col

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body>
    <div class="row">
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
        <div class="col-1">
            <div class='card'>
                <div class='card-body'>
                    <h5 class='card-title'>TITRE</h5>
                    <p class='card-text'>TEXT</p>
                    <p class='card-text'>text</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

您将在浏览器中看到正确的div

html 在同一行中生成许多列-前端Bootstrap 5

1条答案

相关问题

热门标签

最新问答