Есть сверстанная на Bootstrap 3 страница, которую копипастом вставляю на jsp. Есть файл css, в котором определяется, как будут вести себя колонки при различной ширине экрана. Делается это через @media screen:
При запуске приложения все стили работают нормально, кроме вот этой адаптивной верстки:
То есть, то, что должно стать псевдо-элементом, и определить количество и ширину колонок, добавляется строчкой текста вначале, а колонки растягиваются по ширине страницы. Код jsp, с колонками, куда должен добавляться псевдо-элемент:
<div class="container-fluid">
<div class="row masonry" data-columns>
<div class="item">
<div class="panel panel-primary">
<div class="panel-heading">Заголовок</div>
<div class="panel-body">
<div class="caption">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<p><a href="#" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modal-1">Подробнее</a></p>
</div>
<div class="panel-footer">
<span class="glyphicon glyphicon-star">5</span>
<span class="pull-right my-grey-text">Дедова Маргарита : 31:12:2017</span>
</div>
</div>
</div>
<div class="item">
Дело в jsp или css?