Ширина бутстрапа становится переполненной

Question

Адрес показа изображения расширенный

Текст, не содержащий структуру столбца Bootstrap

Я попытался добавить ширину = 100%

<div class="row" style="padding-bottom:40px;">
    <div class="col-md-4" style="padding-bottom:20px;">
        <div width="200px">
            <strong>Quote ID: </strong>{!quoteValue.Name}<br/>
            <strong>Quote Date: </strong>{!quoteDate}<br/>
            <strong>Contact: </strong>{!quoteContactName}<br/>
            <strong>Address: </strong>{!quoteAddress}
        </div>
    </div>
    <div class="col-md-4" style="padding-bottom:20px;">
        <div>Your Health Representative:
        </div><strong>{!$User.FirstName} {!$User.LastName}</strong>
            <div>{!$User.Phone}</div>
        <div><a href="mailto:{!$User.Email}">{!$User.Email}</a></div>
    </div>
    <div class="col-md-4" style="padding-bottom:20px;">
        <div>Notes:<br/><small>This is NOT a bill. It is an illustrative quote, based on the census information provided. Please contact your Broker for details on how to move forward with Universal Health Fellowship products.</small></div>
    </div>
</div>

Нужно содержать кавычку в структуре столбца

Answer 1

Вы можете достичь этого с помощью стиля CSS word-break. По умолчанию длинные слова (без пробелов) не разбиваются на более мелкие части. Вы можете установить, например,

.col-md-4 {
  word-break: break-all;
}

Демо