包含使用引導標題的框

-1

我正在嘗試創建一個帶有標題的框。我們使用CSS的引導程序[http://getbootstrap.com/]。盒子應該如下所示。它是響應式設計的一部分，並具有span9類。任何幫助是極大的讚賞。包含使用引導標題的框

這是我試圖達到相同的：

CSS和HTML

.container:before, .container:after { display:table; content:""; } 
 

 
.container:after { clear:both; } 
 

 
.container { width:500px; margin:0 auto; border:1px solid #fff; 
 
    box-shadow:0px 2px 7px #292929; 
 
    -moz-box-shadow: 0px 2px 7px #292929; 
 
    -webkit-box-shadow: 0px 2px 7px #292929; border-radius:10px; 
 
    -moz-border-radius:10px; 
 
    -webkit-border-radius:10px; background-color:#ffffff; } 
 

 
.mainbody { height:250px; width:500px; border: solid #eee; 
 
    border-width:1px 0; } 
 

 
.header, .footer { height: 40px; width:50px; border : 1px solid red; 
 
    padding: 5px; } 
 

 
.footer { background-color: whiteSmoke; 
 
    -webkit-border-bottom-right-radius:5px; 
 
    -webkit-border-bottom-left-radius:5px; 
 
    -moz-border-radius-bottomright:5px; 
 
    -moz-border-radius-bottomleft:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; }

<div class="header container"> 
 
    Header 
 
</div> 
 
<div class="container"> 
 
    <div class="mainbody"> 
 
    main body 
 
    </div> 
 
    <div class="footer"> 
 
    footer 
 
    </div> 
 
</div>

感謝

enter image description here

來源

2014-02-14 Anirban

此社區將幫助您克服difficutlies，而不是爲您的實際工作。 –

正在使用的引導程序的版本 – HTTP

@HTTP - 我正在使用版本Bootstrap v3.1.1。我也試圖找到相同的解決方案 – Anirban

我決定SPE nd有時間爲你做這件事，但下一次至少在你提出要求並提供給我們你所嘗試的東西之前，我們不要犯你犯的同樣的錯誤。

您需要Jquery和Bootstrap（CSS和JS）。

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Dropdown link</a></li> 
    <li><a href="#">Dropdown link</a></li> 
    </ul> 
</div>

這是一個工作演示。 http://jsfiddle.net/d45SQ/

來源

2014-02-14 04:35:40 nahtnam

謝謝natham的幫助。 Plz指我的編輯 – Anirban

沒問題@Anirban讓我知道你是否需要任何其他的引導幫助。如果它解決了您的問題，請將其標記爲正確的答案。謝謝。 – nahtnam

不幸的是，納坦 - 這不是我正在尋找的解決方案。請參考我輸入的html和css。我期待在同一行 – Anirban

包含使用引導標題的框

回答

相關問題