調整大小Jumbotron

我想減少jumbotron的高度不是像素而是百分比（例如div的高度，窗口高度）。採用不同窗口大小和響應式設計的最佳方法是什麼？調整大小Jumbotron

這裏是我的代碼：

<!-- START PAGE CONTENT WRAPPER --> 
    <div class="page-content-wrapper"> 
     <!-- START PAGE CONTENT --> 
     <div class="content"> 
      <div class="social-wrapper"> 
       <div class="social " data-pages="social"> 
        <!-- START JUMBOTRON --> 
        <div class="jumbotron" data-pages="parallax" data-social="cover"> 
         <div class="cover-photo"> 
          <img alt="Cover photo" src="assets/img/social/cover.png" /> 
         </div> 
         <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20"> 
          <div class="inner"> 
           <div class="pull-bottom bottom-left m-b-40"> 
            <h5 class="text-white no-margin">Team Members</h5> 
            <h1 class="text-white no-margin"><span class="semi-bold">Lemp</span> Team</h1> 
           </div> 
          </div> 
         </div> 
        </div> 
      <!-- END JUMBOTRON --> 
     </div> 
     <!-- END PAGE CONTENT -->

感謝。

來源

2016-02-25 burakkesepara

您可以簡單地從'.jumbotron'覆蓋填充。默認情況下，bootstrap的'padding-top：48px; padding-bottom：48px;'用於jumbotron。 – CodeRomeos

它不工作我嘗試過朋友 – burakkesepara

您可以使jumbotron保持寬高比。

檢查Sean Dempsey小提琴。

只需修改

<div class="box sixteen-nine"> 
<div class="content"> 
    <span>16:9</span> 
</div>

您的超大屏幕

你可以看到克里斯Coyer full explanation

來源

2016-02-25 18:04:00 Kinari

調整大小Jumbotron

回答

相關問題