2014-09-23 2 views
0

У меня есть макет с Bootstrap. Моя проблема заключается в том, что я не могу получить одинаковый вывод на каждом мониторе. В портативном ПК выход отличается от обычного монитора.Загрузочный контейнер-жидкость такой же на каждом разрешении экрана

Я уже перешел из контейнера в контейнерную жидкость, но все равно не могу получить такой же выход на каждом мониторе. Можно ли прочитать разрешение экрана и настроить код на него?

Это мой код:

<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 --> 
+0

бутстрап отзывчивым framework..it выглядит иначе, основываясь на экране resolutions..You не хотите, чтобы это реагировать? – Sudheer

ответ

1

Я просто дал еще один парень, некоторые Mark Up/CSS, чтобы его сайт жидкость я думаю, что это также поможет вам.

padding causes overlap, fluid design?

Если вам нужна дополнительная помощь, дайте мне знать: D

Смежные вопросы