Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
13 / 9 / 3
Регистрация: 06.01.2015
Сообщений: 62
1

Запретить распирать блок контентом

20.11.2018, 13:31. Показов 756. Ответов 1

Имеется некий шаблон сверстанный на Bootstrap 4, для разметки использовались его container, row и col.
Почему то блок <pre class="language-markup"> от PrismJS, распирает колонку пока не установишь ему фиксированный размер (max-width:100% не работает);

Вот попытался повторить эффект:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://prismjs.com/themes/prism.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-auto pr-0 d-none d-lg-block bg-primary" style="width:320px;">
          Left column content
        </div>
        <div class="col bg-secondary">
<pre class="language-markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextBox</span> <span class="token attr-name">Grid.Row</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">Grid.Column</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">Text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{Binding Path=Feed.Title, Mode=OneWay}<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextBox</span> <span class="token attr-name">Grid.Row</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">Grid.Column</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">Text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{Binding Path=Feed.Link.AbsoluteUri, Mode=OneWay}<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextBox</span> <span class="token attr-name">Grid.Row</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">Grid.Column</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">Text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{Binding Path=Feed.Description, Mode=OneWay}<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span></code></pre>
        </div>
      </div>
    </div>
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  </body>
</html>
Посмотреть можно на CodePen. Как сделать так чтобы блок от PrismJS не распирал колонку? Поставить max-width колонке не могу ибо адаптивность ломается...
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.11.2018, 13:31
Ответы с готовыми решениями:

Растянуть блок с контентом
Прижал футер к низу страницы ,а блок контента так и остался на своем месте .Фон боковых колонок...

Как создать блок с контентом?
Скажите пожалуйста как сделать типа такого блока чтоб я мог управлять контентом в нем вот...

Как растянуть блок с контентом?
Добрый день ! Никак не получается растянуть блоки с контентом один расширяется а другие нет Сам...

Блок с контентом с заливкой фона
Есть блок общий в внутри находится первый блок с шапкой блока, второй блок с контентом, третий блок...

1
13 / 9 / 3
Регистрация: 06.01.2015
Сообщений: 62
08.12.2018, 23:45  [ТС] 2
Ничего лучше не придумал чем всунуть костыль в колонку контента, указав ограничение размера для каждого состояния солонки через @media:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.col-content {
  max-width: 860px;
}
 
@media (max-width: 1200px) {
  .col-content {
    max-width: 680px;
  }
}
 
@media (max-width: 992px) {
  .col-content {
    max-width: 100%;
  }
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.12.2018, 23:45

IE блок с контентом в центре уезжает влево
Контент в IE уходит влево, в остальных браузерах по центру. Проверял на IE 10 и 11...

Резиновый блок с контентом, прижатым вниз
Как сделать резиновый по вертикали блок с прижатым к низу текстом, т.е. если текста становится...

Как опустить label под блок с контентом
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta name=&quot;viewport&quot;...

Показать блок(подвал) при скролле, который изначально расположен под блоком с контентом
Всем привет! Пытаюсь релизовать такую вещь как на этом сайте http://ism.juki.pl/spare_parts?id=1....

Много страниц с контентом в пару строк или мало страниц объемным контентом
У меня есть многоязычный сайт, но двумя языками из четырех я практически не пользуюсь,...

Как запретить поисковикам показывать блок в сниппете?
Есть сайт. Хочу, чтобы не весь текст мог попасть в сниппет. Сайт блочной структуры. Нужно, чтобы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru