Попытка сделать загрузочный мод более широким

Я использую этот код, но модальный слишком тонкий:

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

Это выглядит так:

Как я могу сделать этот способ намного шире? В идеале я бы хотел, чтобы он был вдвое больше ширины, поскольку в настоящий момент он слишком тощий.

Ответ 1

Всегда используйте неуправляемый CSS для начальной загрузки, чтобы вы могли видеть, какие стили у них есть на своих компонентах, затем создайте файл CSS ПОСЛЕ того, если вы не используете LESS и переписываете свои микшины или что-то еще

Это модальный css по умолчанию для 768px и выше:

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

Они имеют класс modal-lg для большей ширины

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Если вам нужно что-то в два раза больше размера 600 пикселей и что-то жидкое, сделайте что-то подобное в своем CSS после Bootstrap css и назначьте этот класс модальному диалогу.

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

HTML

<div class="modal-dialog modal-xl">

Демо: http://jsbin.com/yefas/1