如何設置Twitter的引導模式更寬和更高？

24

如果你的模式ID是「myModal」

你可以嘗試添加像風格：

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

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

來源

2013-02-17 09:58:12 Mate

+0

#myModal：style =「width：700px; margin：-250px 0 0 -525px;」 tabindex =「 - 1」AND。modal-body：style =「max-height：525px;」如何在屏幕中間設置我的模式？（現在在左邊） – mamasi 2013-02-17 10:36:18

+0

更新！計算大約一半的寬度... margin：-300px 0px 0px -350px。 – Mate 2013-02-17 10:41:14

+0

好的。現在我明白了。謝謝！ – mamasi 2013-02-17 10:43:57

1

使用CSS：

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

來源

2013-02-17 09:59:20 dfsq

5

在你的CSS文件，添加一個新的類定義：

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

在HTML中，添加higherWider類的字符串內爲您的模式：

<div class="modal hide fade higherWider">

來源

2013-02-17 10:00:05

+0

我不認爲margin-top是解決方案，或許你錯誤地選擇了margin-left – Ismael 2014-11-20 13:23:23

+0

不，margin-top定義會將頁面上的元素移動到較高位置，如命名類「higherWider」所示。 – 2014-11-20 14:35:17

10

對於％大小，你可以做這樣的：

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

來源

2013-05-06 23:38:42

50

在Bootstrap 3.1.1他們補充modal-lg和modal-sm類。您可以控制使用@media查詢，像他們這樣做的modal大小。這是控制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>

來源

2014-03-11 18:07:37

+3

這很好，除了你需要在CSS中的媒體查詢之後放置括號。 – Tigerman55 2014-08-13 12:54:40

+0

你好，爲什麼不直接定位類.modal-dialog？ – 2015-04-05 00:17:52

+0

但是也許'modal-lg'桅杆被添加到類'modal'的div而不是'modal-dialog'？因爲，我使用的是Bootstrap 3.3.5，只有當我將'modal-lg'添加到'div.modal'時，我纔會自動獲得更大的模式（無需額外的樣式）。 – 2016-12-09 10:17:43

-1

以下解決方案無論是爲我工作：

應用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%;}

來源

2015-12-13 13:28:09 user28864

8

要做到這一點，最簡單的方式樣式部分是使用.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>

來源

2016-01-23 18:59:56

7

改變類模型對話框的伎倆，我

.modal-dialog { 
    width: 90%; 
}

來源

2016-02-15 21:02:04 Wishper

4

接受的答案的效果很好，但我會建議使用填充而不是保證金。這樣，當您在模態對話框外單擊時，您可以保留解除功能。

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

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

來源

2017-11-16 23:34:44

如何設置Twitter的引導模式更寬和更高？

回答

相關問題