引导容器流体在每个屏幕分辨率

同我有引导的布局。我的问题是，我无法在每台显示器上获得相同的输出。在便携式电脑中，输出与普通显示器不同。引导容器流体在每个屏幕分辨率

我已经从容器改为容器流体，但还是不能让每台显示器上相同的输出。是否有可能读取屏幕分辨率并调整代码？

这是我的代码：

<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

引导容器流体在每个屏幕分辨率

回答

相关问题