2013-10-28 67 views
0

我在我的MVC應用程序中使用引導警報。當警報出現時,它會佔用左邊界,但在右側則不會有任何餘量。bootstrap提示右邊距問題?

我還沒有做過任何修改的CSS,不知道它是正確的和默認的邊距。 enter image description here

這裏是我的代碼:

<div class="alert alert-block alert-error"> 
    <button type="button" class="close" data-dismiss="alert">&times;</button> 
    It is a test error message. It is test error message. 
    It is a test error message. It is test error message. 
    It is a test error message. It is test error message. 
    It is a test error message. It is test error message. 
    It is a test error message. It is test error message. 

</div> 

我試圖把這個在一個div並添加

我試過嗎?

我試着把這段代碼放在一個div中,並在外部div上應用.input-append。至於截面的結果警報筆觸和自動隱藏,並留在畫面如下:

enter image description here

我需要什麼幫助?

你能指導我如何讓利潤率在左側和右側平等,是否有一個在自舉中的默認類?

編輯 我明白,我可以集中這個div我fixing width和設置margins:auto,但關注的是固定寬度將它保持respnsive,因爲它是用引導的基本目的是什麼?我不知道在修改什麼樣式我應該修改,什麼不是。

回答

1

中心整個DIV這會自動提供右頁邊距:

<div class="alert alert-block alert-error" style="width:800px margin: 0 auto;"> 

如果白色外包裝盒的寬度爲1000像素,那麼你就必須在每邊

+0

感謝,固定寬度和設置邊距,它會保持響應?我所關心的是使用bootstrap的目的是,它是響應式的。我不知道我應該做什麼樣的CSS修改? – Toubi

+0

您可以嘗試將寬度設置爲百分比,然後設置邊距 – Mazzy

1

正確的代碼100px的保證金是:

<div class="alert alert-block alert-danger alert-dismissable"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
    It is a test error message. It is test error message. 
    It is a test error message. It is test error message. 
    It is a test error message. It is test error message. 
    It is a test error message. It is test error message. 
    It is a test error message. It is test error message. 

</div> 

邊距/補白被施加到母體的div,而不是警報DIV本身

http://jsfiddle.net/N5aG5/1/

0

,因爲你正在使用引導程序,你可以用自己的網格系統,以保持你的設計響應,例如:

<div class="alert alert-block alert-error col-xs-12 col-sm-6 col-sm-push-3"> 
    <button type="button" class="close" data-dismiss="alert">&times;</button> 
    It is a test error message. It is test error message. 
    ... 
</div> 

我還添加類文本中心讓它看起來更好案例簡短的文字。