Настройка существующих твитер-бутстрапов модальных стилей

Question

Так что я довольно новичок в CSS. Я знаю, что есть наследование, но помимо шрифта, я не всегда уверен, где он применяется. Так что я пытаюсь сделать, это модифицировать модальный класс twitter bootstrap. Существует мнение, что основа показываются в настоящее время с этими классами:

modal hide fade 

То, что я хочу сделать, это увеличить ширину и высоту точки зрения модального, но сохранить все другие свойства модальных CSS в такте. Есть ли способ сделать это? В моем собственном файле local.less для моего проекта я сначала попытался сделать то, что я нашел в googled, который был How can I change the default width of a Twitter Bootstrap modal box?

Но мое мнение больше не было модальным. Он не был сосредоточен и не имел затемненного фона. Поэтому я подумал, что могу просто скопировать класс .modal из twitter bootstrap в файл local.less, а затем изменить ширину/высоту. Поэтому я пробовал это с этим:

.modal-width-half (@modalWidth: 50%) { 
    top: 50%; 
    left: 50%; 
    z-index: 1050; 
    overflow: auto; 
    width: @modalWidth; 
    margin: -250px 0 0 -@modalWidth/2; 
    background-color: white; 
    border: 1px solid #999999; 
    border: 1px solid rgba(0, 0, 0, 0.3); 
    *border: 1px solid #999999; 
    /* IE6-7 */ 

    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding-box; 
    background-clip: padding-box; 
} 

И снова стиль не модальный. Есть что-то, чего я не вижу или делаю неправильно? Благодарю.

Answer 1

Я просто сделал это и могу поделиться линией, которую вам не хватает.

В моей фиксации, чтобы изменить ширину модальности, мне пришлось изменить свойство width, а также margin-left property. Изменяя оба из них, вы сохраните форму в центре.

.modal { 
    width: @modalWidth; 
    margin-left: -@modalWidth/2; 
} 

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

.my-modal { 
    width: @modalWidth; 
    margin-left: -@modalWidth/2; 
} 

Вы можете обратиться к этому в вашем HTML, как:

<div class="modal fade open my-modal">...</div> 

Просто убедитесь, что определение .my-modal приходит после.modal в вашем меньше/файла CSS или определение будет отменено стиль бутстрапа.