Ограничить содержимое Bootstrap Выберите содержимое для столбцов, контейнер которых ограничен

Question

У меня есть bootstrap-select Компонент, содержимое которого выходит за пределы сетки, кнопка, которая вызывает его соответствие. Это на самом деле полностью уходит со страницы:

Разметка (шаблонизация Django, но это не актуально, я не думаю):

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
    <div class="form-group">
      <select
        class="selectpicker form-control"
        data-title="Please select"
      >
        {% for item in items %}
        <option
          data-content="
            <div>
              <div>
                <i class='fa {{ item.icon }}'></i>
                <h4-text'>{{ item.title }}</h4>
              </div>
              <div>
                <p class='text'>{{ item.very_long_text }}</p>
              </div>
            </div>"
        ></option>
        {% endfor %}
      </select>
    </div>
  </div>
</div>

Удаление item.very_long_text (p.text) узел решает проблему и сетка придерживается, так что это определенно проблема. Я попытался применить следующие стили к этому узлу, чтобы контролировать проблему, но она сохраняется:

• ширина: авто;
• ширина: 100%;
• overflow-wrap: break-word;
• переполнение: нормальное;
• разбить слово: разбить все;
• красный цвет;
• пробел: [каждое доступное значение];
• перенос слов: брейк-слово;

Фактически, единственное решение, которое работает, это:

.dropdown-menu {
  max-width:100%;
}

Но мне кажется очень неаккуратным переопределить класс Bootstrap, который, как я понимаю, имел в виду, работать так, как я хочу.

Как я могу ограничить содержимое этого меню выбора столбцами сетки, которыми ограничен его триггер?

^{† Раздел, на который я ссылался в документации Boostrap Select, ясно показывает IMO}

Answer 1

Похоже, что содержимое расширяет сетку, потому что по умолчанию элементы выпадающего меню начальной загрузки имеют свои white-space установлен в nowrap, Сбросить это до normal например, применяя класс к каждому data-content Элемент, кажется, решить эту проблему. Ниже приведено минимальное воспроизведение.

$('select').selectpicker();

.fix {
  white-space: normal
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/js/bootstrap-select.min.js"></script>

<select class="selectpicker" data-title="Please select">
  <option title="Option 1"
    data-content="
      <div class='fix'>
        <div>
          <i class='glyphicon glyphicon-ok'></i>
          <h4>Lorem Ipsum</h4>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>"
  ></option>
  <option title="Option 2"
    data-content="
      <div class='fix'>
        <div>
          <i class='glyphicon glyphicon-ok'></i>
          <h4>Lorem Ipsum</h4>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>"
  ></option>
  <option title="Option 3"
    data-content="
      <div class='fix'>
        <div>
          <i class='glyphicon glyphicon-ok'></i>
          <h4>Lorem Ipsum</h4>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>"
  ></option>
</select>