css 引导列总是垂直显示或总是水平显示

omhiaaxx 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(149)

我是一个使用HTML/CSS的新手，目前正在使用Bootstrap Studio进行项目。我正在创建一个网页的“关于”部分，其中我做了四行，每行两列，就像这样：
| | |
| --------------|--------------|
| 图像|文本|
| 文本|图像|
| 图像|文本|
| 文本|图像|
在移动的/小屏幕上，我希望列看起来像这样：
| |
| --------------|
| 图像|
| 文本|
| 图像|
| 文本|
| 图像|
| 文本|
| 图像|
| 文本|
我试过在不同的屏幕尺寸下改变列的宽度，我试过改变每行的列数，甚至在我的页面中还有另一个例子，我设法让它在较小的规模上工作，但我不能复制它。
作为一个新手，我真的很挣扎。将非常感谢一些帮助外行的术语，因为我还没有完全舒适的所有行话。
非常感谢。

css

来源：https://stackoverflow.com/questions/76138667/bootstrap-column-either-always-displaying-vertically-or-always-horizontally

2条答案

按热度按时间

kfgdxczn1#

这是一个你想达到的目标的例子。希望它能帮到你。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Simple Admin Dashboard</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <link rel="stylesheet" href="res/chartist.min.css">
    <style>
        img {
          height: 250px;
          object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="row">
       <div class="col-md-6 col-sm-12 m-auto">
         <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
       </div>
       <div class="col-md-6 col-sm-12">
         Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
       </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12 order-md-2">
        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
      </div>
      <div class="col-md-6 col-sm-12">
        Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
      </div>
      <div class="col-md-6 col-sm-12">
        Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12 order-md-2">
        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
      </div>
      <div class="col-md-6 col-sm-12">
        Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
      </div>
      <div class="col-md-6 col-sm-12">
        Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
      </div>
    </div>
</body>
</html>

赞(0）回复(0）举报 2023-05-02

nfs0ujit2#

你不需要做任何事情，只需要使用col-md-6和col-12。
由于col-md-6在大于或等于768px的宽度时将获得row宽度的50%，而col-12在宽度为768px或以下的小型设备中将获得row宽度的100%。

<div class="row">
 <div class="col-md-6 col-12">text</div>
</div>
<div class="row">
 <div class="col-md-6 col-12">More Text</div>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

css 引导列总是垂直显示或总是水平显示

2条答案

相关问题

热门标签

最新问答