Блог

Главная - Вопросы по программированию - Как показать все содержимое, когда для класса установлено значение flex-nowrap в bootstrap?

Как показать все содержимое, когда для класса установлено значение flex-nowrap в bootstrap?

#html #css

#HTML #css

Вопрос:

Недавно я разрабатываю bootstrap с использованием bootstrap для системы чата. Но публикация задания для меня очень сложна. Я хочу разработать шаблон сообщения с помощью bootstrap. Я использую только сеточную систему начальной загрузки.

 <!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 будут скрыты.
Я не знаю, что делать. Я хочу всегда показывать следующую картинку.

введите описание изображения здесь

Ответ №1:

Вам нужно поиграть с классами col и col-auto внутри структуры строк и использовать класс разрыва текста для удаления однострочного текста без пробелов.

Я надеюсь, что приведенный ниже фрагмент текста вам очень поможет.

 <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>

Комментарии:

1. Спасибо. Но я не хочу показывать символы, такие как точки (…..). Я хочу показать содержимое через разрыв текста.

2. Я не хочу это опускать.

3. Большое спасибо, но этот код заполняет область, кроме столбца time. Я хочу заполнить только размер содержимого. например) В моем исходном коде использовались col-auto, col-auto.

4. Не устанавливайте оба столбца как col-auto. Итак, 1-й должен быть col , а последний должен быть col-auto , тогда это не будет заполнять область столбца time.

5. Я не хочу заполнять весь столбец сообщения, я хочу заполнить только ширину сообщения. не ширина столбца сообщения. Но если я использую col, то он заполняет всю область столбца. Как это сделать?

Ответ №2:

«d-flex» важен. Вы можете попробовать:

 <div class="d-flex flex-nowrap">
  ...
</div>