0

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

<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 нет возможности (оно неизвестно).
2
  • А вы можете добавить код где у вас проблемный div расширяется не так как вам хочется? А я затем постараюсь решить вашу проблему. 18 янв 2017 в 12:07
  • @VadimOvchinnikov Добавил пример кода.
    – DarkGenius
    18 янв 2017 в 12:34

1 ответ 1

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%;
}
2
  • В содержимом блока article могут быть таблицы, ограничение с помощью max-width для них не работает.
    – DarkGenius
    18 янв 2017 в 11:54
  • 1
    в бутстрапе для этого предусмотрен контейнер с классом .table-responsive
    – kizoso
    18 янв 2017 в 14:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.