引導容器流體在每個屏幕分辨率

同我有引導的佈局。我的問題是，我無法在每臺顯示器上獲得相同的輸出。在便攜式電腦中，輸出與普通顯示器不同。引導容器流體在每個屏幕分辨率

我已經從容器改爲容器流體，但還是不能讓每臺顯示器上相同的輸出。是否有可能讀取屏幕分辨率並調整代碼？

這是我的代碼：

<body style="overflow: hidden; height: 100%;"> 
    <?php 
     include ($_SERVER['DOCUMENT_ROOT']."/include/Menu.php"); 
    ?> 
    <div class="jumbotron" style="border-bottom: solid 3px rgb(132, 177, 161);"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-1" style="padding-left:0px">  
        <button id="New" type="button" class="btn btn-default btn-sm ButtonEWG"> 
         <img id="ButtonIcon" src="/img/icons/plus.png" style="padding-right: 10px;"> 
         New 
        </button> 
       </div> 
       <div class="col-md-1">  
        <button id="New" type="button" class="btn btn-default btn-sm ButtonEWG"> 
         <img id="ButtonIcon" src="/img/icons/excel.png" style="padding-right: 10px;"> 
         Export 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="container-fluid viewport" style="padding: 0px;"> 
      <div class="row thick" style="border-bottom: solid 3px rgb(132, 177, 161); margin: 0px; padding: 0px;"> 
       <div class="col-md-6" style="height: 100%; padding: 0px; border-right: solid 3px rgb(132, 177, 161); border-left: solid 3px rgb(132, 177, 161)"> 
        <div id="OccurrencesGrid" style="border: none"></div> 
       </div> 
       <div class="col-md-6"> 
        <div id='DetailsTabs'style="margin-top:10px; border:none"> 
         <ul> 
          <li style="margin-left: 30px;">Occurrence Details</li> 
          <li>Occurrence status overview</li> 
         </ul> 
         <div style="padding-top:20px; background-color:#F5F5F5;"> 
          <div id='OccurrenceDetails'></div> 
         </div> 
         <div style="padding-top:20px; background-color:#F5F5F5"> 
          <div class = "row"> 
           <div class = "col-md-4"><div class="alert alert-info" role="alert" style="background-color: #F5F5F5;">Opening</div></div> 
           <div class = "col-md-2" align="center"><div class="alert alert-info" role="alert">N/A</div></div> 
           <div class = "col-md-2" align="center"><div class="alert alert-success" role="alert"><?php echo $StatusGrid[0];?></div></div> 
           <div class = "col-md-2" align="center"><div class="alert alert-warning" role="alert">N/A</div></div> 
           <div class = "col-md-2" align="center"><div class="alert alert-danger" role="alert"><?php echo $StatusGrid[1];?></div></div> 
          </div> 
         </div>     
        </div> 
       </div> 
      </div> 


      <div class="row-fluid thin" style="padding-top: 10px;"> 
       <div class="col-md-2"> 
        <div id="LeftDonut" style="height:250px;"></div> 
       </div> 
      </div> 
    </div> <!-- /container -->

來源

2014-09-23 user3163404

引導是基於屏幕resolutions..You不希望它成爲一個敏感響應framework..it看起來有什麼不同？ – Sudheer 2014-09-23 09:50:58

我只是給了另一個人的一些標記/ CSS，以保持他的網站流體我認爲這也將幫助你。

padding causes overlap, fluid design?

如果您需要進一步的幫助，讓我知道：d

來源

2014-09-23 09:45:42

引導容器流體在每個屏幕分辨率

回答

相關問題