时间戳

首页 > 解决方案 > Bootstrap4：“col-12”在手机屏幕上还是太宽，怎么换行？

html - Bootstrap4：“col-12”在手机屏幕上还是太宽，怎么换行？

问题描述

我将 Bootstrap4 用于网格系统。我正在使用col-12手机屏幕和col-md-6笔记本电脑屏幕。当我在手机上查看我的网站时，第一张图片太大，而且文字不换行但延伸到侧面。如何使用 bootstrap4 网格系统使我的内容适合移动屏幕？以下是我当前的代码：

.album {
    margin-bottom: 100px;
}
.album img {
    width: 800px;
}
.container {
    width: 800px;
}
.content {
    padding: 2px;
    width: 100%;
}

.blogWriting {
    margin-bottom: 80px;
    padding: 15px 35px;
    font-size: 13px;
}

.dateWriting {
    text-align: right;
    font-size: 13px;
    padding: 15px 35px;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="album container">
  <div class="row justify-content-center">
      <div class="col-12 col-md-auto">
          <img src="https://via.placeholder.com/150" alt="d">
      </div>
  </div>

  <div class="row justify-content-center">
          <div class="col-12 col-md-6 content">
              <div class="blogWriting">
              <p><b>Crown Heights</b> is simply dummy text of
                  the printing and typesetting industry.
                  Lorem Ipsum has been the industry's standard
                  dummy text ever since the 1500s,
                  when an unknown printer took a galley
                  of type and scrambled it to make a type
                  specimen book. It has survived not only
                  five centuries, but also the leap into
                  electronic typesetting, remaining
                  essentially unchanged.
              </p>
              <p><b>Bushwick</b> is simply dummy text of
                  the printing and typesetting industry.
                  Lorem Ipsum has been the industry's standard
                  dummy text ever since the 1500s,
                  when an unknown printer took a galley
                  of type and scrambled it to make a type
                  specimen book. It has survived not only
                  five centuries, but also the leap into
                  electronic typesetting, remaining
                  essentially unchanged.
              </p>
              </div>
          </div>

          <div class="col-12 col-md-6 content">
              <div class="dateWriting">
                  <p>October 28th, 2020 <br>
                  By Name</p>
              </div>
          </div>
  </div>
</div>

标签： htmltwitter-bootstrapbootstrap-4

解决方案

图像和容器的大小定义为 800 像素，因此它将始终为 800 像素，对移动设备使用媒体查询或使用宽度：100% 作为 img 样式

.album {
  margin-bottom: 100px;
}
.album img {
    width: 100%;
}
.container {
    width: 100%;
}

或试试这个

    .album {
      margin-bottom: 100px;
    }
    .album img {
        width: 800px;
    }
    .container {
        width: 800px;
    }

@media(max-width: 767px){
         .album img {
        width: 100%;
    }
    .container {
        width: 100%;
    } 
    }

推荐阅读