时间戳

首页 > 解决方案 > 在引导程序中将类设置为 flex-nowrap 时如何显示所有内容？

html - 在引导程序中将类设置为 flex-nowrap 时如何显示所有内容？

问题描述

最近，我正在使用引导程序开发聊天系统。但出版工作对我来说非常困难。我想使用引导程序开发消息模板。我只使用引导网格系统。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="lib/bootstrap.min.js"></script>
    
    <div class="container-fluid">
        <div>NickName</div>
        <div class="row flex-nowrap">
            <div class="col-auto" style="background-color: beige;">
                <div class="row flex-nowrap">
                    <div class="col-auto">
                        <div class="text-break">
                            FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
                        </div>
                        <div>
                            SIZE
                        </div>
                    </div>
                    <div class="col-auto align-self-center">  
                        <img src="./images/ic-download-doc-nor.png"/>
                    </div>
                </div>
            </div>
            <div class="col-auto align-self-center text-nowrap">
                PM 7:32
            </div>
        </div>
    </div>
</body>
</html>

当类设置为 flex-nowrap 时，我想显示所有内容。但是上面的代码运行不好。如果我在上述代码中减小浏览器大小，则图像标签和 PM7:32 将被隐藏。我不知道该怎么办。我想总是显示下面的图片。

在此处输入图像描述

标签： htmlcss

解决方案

您需要在行结构中使用 class col 和 col-auto 并使用text - break类来制动没有空格的单行文本。 我希望下面的代码片段对您有很大帮助。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
  <div>NickName</div>
  <div class="row">
    <div class="col-12">
      <div class="row flex-nowrap align-items-center">
        <div class="col">
          <div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
            <div class="col">
              <div class="text-break">
                <strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
              </div>
              <div>
                <strong>Size:</strong> 100kb
              </div>
            </div>
            <div class="col-auto">
              <img src="./images/ic-download-doc-nor.png"/>
            </div>
          </div>
        </div>
        <div class="col-auto text-nowrap">
          PM 7:32
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读