Bootstrap - Запретить расширение контейнера

237
20 января 2017, 06:27

Имеется фрагмент кода:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6" id="article"></div>
    </div>
</div>

В блоке с id="article" содержимое формируется динамически. При этом блок растягивается по горизонтали, если содержимое слишком большое по ширине. Как запретить растяжение по горизонтали сверх ширины, устанавливаемой классом col-?

Уточнение:

  1. В содержимом блока article могут быть таблицы, ограничение с помощью max-width для них не работает. Пример:

<table cols="6" rules="NONE" border="0" cellspacing="0" height="611" width="648"> 
  <colgroup> 
    <col width="86"> 
      <col width="86"> 
        <col width="129"> 
          <col width="115"> 
            <col width="86"> 
              <col width="117"> 
  </colgroup> 
  <tbody> 
    <tr> 
      <td style="border-width:1px;border-style:solid;border-color:#000000;" align="CENTER" height="19" valign="TOP">2016-11-10</td> 
      <td style="border-width:1px;border-style:solid;border-color:#000000;" align="CENTER">36,00</td> 
      <td style="border-width:1px;border-style:solid;border-color:#000000;" align="CENTER">1&nbsp;230&nbsp;933</td> 
      <td style="border-width:1px;border-style:solid;border-color:#000000;" align="CENTER">44&nbsp;313&nbsp;588,00</td> 
      <td align="LEFT"> 
        <br> 
      </td> 
      <td align="LEFT"> 
        <br> 
      </td> 
    </tr> 
  </tbody> 
</table>

  1. Пытался реализовать вариант с использованием wrapper-блока внутри article. Однако, применение стиля max-width: 100% не работает (т.к. внешний контейнер не имеет фиксированной ширины), а задавать конкретное значение для max-width нет возможности (оно неизвестно).
Answer 1

стили бутстрапа:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

html:

<div class="container-fluid">
   <div class="row">
      <div class="col-md-6 col" id="article"></div>
      <div class="col-md-4 col"></div>
      <div class="col-md-2 col"></div>
   </div>
</div>

стили для контейнера:

.col {
  position: relative;
}
.col > *{
  max-width: 100%;
}
READ ALSO
Задержка в анимации
HTML

Задержка в анимации

Как положить в переменную дочерний элемент выбранного объекта? попробовал так:

 277
Действия по завершении анимации
HTML

Действия по завершении анимации

Здесь следует обратить внимание на цвет абзаца, это работает так: когда блок скрыт - абзац красный, когда блок появляется - абзац чёрныйАбзац...

 271
Сравнение значений поля ввода в каждом блоке
HTML

Сравнение значений поля ввода в каждом блоке

Здравствуйте! Есть форма с несколькими блоками в которых, в свою очередь присутствуют по два инпута from и toЕсть скрипт, который сверяет введенные...

 349
Нижняя рамка активных элементов
HTML

Нижняя рамка активных элементов

Здравствуйте, у меня при наведении на элемент в Google Chrome должна появляться рамка 3px, но сначала появляется однопиксельная, и потом достраивается...

 308