Я схожу с ума по этому поводу и не могу понять, почему это происходит.Я не настолько продвинут в начальной загрузке, но думаю, что все в порядке, и я уже пробовал много разных способов.
Так что у меня есть окно чата внутри карты, с одним столбцом, который должен пытаться взять всю ширину картыи справа столбец 2 со списком пользователей, который исчезает на меньших экранах (d-none d-lg-block). Сообщения складываются в блоки для каждого пользователя, как в Discord.Каждый блок сообщений состоит из столбца col-xs-1, который содержит аватар пользователя, а затем столбец полной ширины для реальных сообщений.
Хотя все выглядит нормально, столбец сообщений как-то сворачивается под столбцом аватарана маленьких экранах, когда одно из сообщений длинное.Это также вызывает проблемы со столбцом отзывчивых пользователей, перед достижением точки останова d-none он помещается под другой столбец фиксированной ширины.Когда сообщение очень длинное, оно в любом случае помещается туда на всех экранах.Я пытался разбить слова, переполнения и т. Д. Без удачи.Слово разбито на части, но оно все еще вызывает проблемы.
Вы можете просмотреть код в bootply: https://www.bootply.com/KmwTGY86yu Или как фрагмент
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
Card header
</div>
<div class="card-body">
<div class="row">
<div class="col">
<!-- full-width column for message box -->
<div class="container-fluid" style="overflow-y: auto; overflow-x: hidden">
<!-- start of messages box -->
<div class="row">
<!-- message block -->
<div class="col-xs-1">
<div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
</div>
<div class="col">
<h5 class="text-danger float-left">Username</h5>
<small class="text-muted float-right">timestamp</small>
<div class="clearfix"></div>
<div>
This is a single message
</div>
<div>
This is another single message
</div>
</div>
<hr class="w-100">
</div>
<div class="row">
<div class="col-xs-1">
<div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
</div>
<div class="col">
<h5 class="text-danger float-left">Username 2</h5>
<small class="text-muted float-right">timestamp</small>
<div class="clearfix"></div>
<div>
This is a third message
</div>
<div>
ASNDJKASJDAJDKLAJLADSAJLKASDJLAKSJDKLSAJDLKAJKALDJKLJDLADJLASJDLKSAJDASJDLASDASDASDASDASA
</div>
</div>
<hr class="w-100">
</div>
<div class="row">
<!-- message block -->
<div class="col-xs-1">
<div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
</div>
<div class="col">
<h5 class="text-danger float-left">Username</h5>
<small class="text-muted float-right">timestamp</small>
<div class="clearfix"></div>
<div>
This is a single message
</div>
<div>
This is another single message
</div>
</div>
<hr class="w-100">
</div>
</div>
<!-- end messages box -->
</div>
<div class="col-2 d-none d-lg-block">
Users bar, gets pushed under first column before disappearing when one of messages is too long
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Просто откройте его в другом окне и измените его размер до меньшего.