2012-09-05 144 views
0

我在Twitter Bootstrap腳手架頁面的.well內放置幾個div時遇到了一些麻煩。我現在一直在努力研究它,但是我的CSS知識是有限的,我主要是在自學。Bootstrap/CSS div放置問題

http://jsfiddle.net/hEvwR/

它應該是這個樣子:

The mock up

這原本是翡翠,但我把它轉換爲的問題。我很樂意爲此頁面上的最佳做法提供任何建議。

回答

1

http://jsfiddle.net/hEvwR/2/

變化

<div class="span5"> 
     <p><strong>Enter Your Mobile Phone Number</strong> 
     </p> 
     <input id="features-demo-number" type="text" placeholder="555-123-4567" style="text-align:center;padding:10px 12px;font-size:16px;margin-top:10px;" class="input-medium"/> 
     <div class="pull-left"> 
     <p><strong>(Optional) Enter a MLS identification number for a more personalized demo</strong> 
     </p> 
     <input id="features-demo-mls-number" type="text" placeholder="123456789" style="text-align:center;padding:10px 12px;font-size:16px;margin-top:10px;" class="input-medium"/><br/> 
     <button id="features-demo-customer" class="btn btn-primary btn-large">Send <strong>Buyer</strong> Notification <i class="icon-share-alt icon-white"></i> 
     </button> 
     </div> 
     <div class="pull-right"> 
     <video id="video-preview" controls="controls" preload="auto" poster="images/poster.png" width="250" height="140" data-setup="{}" class="video-js vjs-default-skin"> 
      <source src="https://s3.amazonaws.com/textoad.com/assets/textoad.mp4" type="video/mp4"> 
      </source> 
     </video><a href="/signup" style="margin-top:20px;margin-left:0px;font-size:18px;padding-left:20px;padding-right:20px;text-align:center;" class="btn btn-large btn-primary">Sign Up Now</a> 
     </div> 
    </div> 

<div class="span5"> 
     <div class="pull-left"> 
     <p><strong>Enter Your Mobile Phone Number</strong></p> 
     <input id="features-demo-number" type="text" placeholder="555-123-4567" style="text-align:center;padding:10px 12px;font-size:16px;margin-top:10px;" class="input-medium"/> 
     <p><strong>(Optional) Enter a MLS identification number for a more personalized demo</strong> 
     </p> 
     <input id="features-demo-mls-number" type="text" placeholder="123456789" style="text-align:center;padding:10px 12px;font-size:16px;margin-top:10px;" class="input-medium"/><br/> 
     <button id="features-demo-customer" class="btn btn-primary btn-large">Send <strong>Buyer</strong> Notification <i class="icon-share-alt icon-white"></i> 
     </button> 
     </div> 
     <div class="pull-right"> 
     <video id="video-preview" controls="controls" preload="auto" poster="images/poster.png" height="140" data-setup="{}" class="video-js vjs-default-skin"> 
      <source src="https://s3.amazonaws.com/textoad.com/assets/textoad.mp4" type="video/mp4"> 
      </source> 
     </video><a href="/signup" style="margin-top:20px;margin-left:0px;font-size:18px;padding-left:20px;padding-right:20px;text-align:center;" class="btn btn-large btn-primary">Sign Up Now</a> 
     </div> 
    </div> 

並添加

.span5{width:auto;} 
#video-preview{width:210px!important;} 
.span5>.pull-left{width:210px} 
+0

酷,它開始適應。我沒有意識到'!重要'的命令,而這似乎是個訣竅。謝謝! – Alex

+0

@Alex僅用於教育目的:'!important'確實是一個規則,而不是命令:https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception – Pavlo