Как установить твитер-бутстрап более широким и более высоким?

Ответ 1

Если ваш модальный идентификатор является "myModal"

Вы можете попробовать добавить стиль, например:

#myModal 
{
    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}

Ответ 2

В Bootstrap 3.1.1 они добавили классы modal-lg и modal-sm. Вы управляете размером modal, используя @media запросы, подобные им. Это более глобальный способ управления размером modal.

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
        height: 900px; /* control height here */
    }
}

Пример кода:

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Ответ 3

Для размера в% вы можете сделать это:

.modal-body
{
   max-height:80%;
}
.modal
{
   height:80%;
   width:70%;
   margin-left: -35%; 
}
@media (max-width: 768px) {
   .modal
   {
    width:90%;
        margin-left: 2%; 
   }
}

Ответ 4

Самый простой способ сделать это - использовать .modal-lg. Добавьте его в класс модального диалога в модальном контейнере, например:

<div class="modal fade">
    <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                I am now wider!
            </div>
    </div>
</div>

Ответ 5

изменение модели-диалога модели сделало трюк для меня

.modal-dialog {
    width: 90%;
}

Ответ 6

В вашем файле css добавьте новое определение класса:

.higherWider {
    width:970px;
    margin-top:-250px;
}

В вашем HTML добавьте higherWider внутри строки класса для вашего модального:

<div class="modal hide fade higherWider">

Ответ 7

Принятый ответ работает хорошо, однако я бы рекомендовал использовать дополнение, а не маржу. Таким образом, вы сохраняете функцию увольнения при нажатии за пределами модального диалога.

#myModal {
    width: 700px; 
    padding-top: -300px !important;
    padding-left: -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}

Ответ 8

С CSS:

.modal {
    width: 900px;
    margin-left: -450px; // half of the width
}

Ответ 9

Для меня работал один из следующих решений:

• Применяя style="width: 50%; height:50%;" к div в модальном разделе с class="modal-dialog", как показано ниже

  <div class="modal-dialog" style="width: 50%; height:50%;">
  

  или

• Создание раздела стиля таким образом

   #themodal .modal-dialog{ width:50%; height:50%;}