Question

我有一个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 -->

Answer 1

我刚给了另一个人Mark Up / CSS以保持他的网站流畅我认为这也会对你有所帮助。

padding causes overlap, fluid design?

如果你需要进一步的帮助让我知道：D

Bootstrap容器 - 流体在每个屏幕分辨率上相同

1 个答案: