Question

我正在开发一个响应式管理面板。我想把这些盒子放在中心位置。但我无法正确处理html - css。

您可以在不同屏幕尺寸的图片上看到问题。

<div id="content">
            <div id="admin_panel_index" class="col-xs-12">
            <div id="order_panel" class="panel panel-default admin_panel_group">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-cog"></span> Sipariş Yönetimi</h3>
                </div>
                <div class="panel-body">
                    <ul>
                        <?php if($userObj->hasAuthorized('viewOrder')) {?>
                        <li><span class="glyphicon glyphicon-shopping-cart"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>order.php">Siparişler</a></li>
                        <?php } ?>
                        <?php if($userObj->hasAuthorized('viewPaymentList')) {?>
                        <li><span class="glyphicon glyphicon-credit-card"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>payment_list.php">Ödeme Kayıtları</a></li>
                        <li><span class="glyphicon glyphicon-credit-card"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>fp_list.php">Harici Ödeme Kayıtları</a></li>
                        <?php } ?>
                        <?php if($userObj->hasAuthorized('viewStats')) {?>
                        <li><span class="glyphicon glyphicon-usd"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>stats.php">Satış Raporu</a></li>
                        <?php } ?>
                        <?php if($userObj->hasAuthorized('viewOrder')) {?>
                        <li><span class="glyphicon glyphicon-gift"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH."gold.php?y=".date("Y")."&m=".date("m"); ?>">Altın Kampanyası</a></li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
            <div id="user_panel" class="panel panel-default admin_panel_group">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-cog"></span> Müşteri Yönetimi</h3>
                </div>
                <div class="panel-body">
                    <ul>
                        <?php if($userObj->hasAuthorized('viewUser')) {?>
                        <li><span class="glyphicon glyphicon-user"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>user.php">Müşteriler</a></li>
                        <?php } ?>
                        <?php if($userObj->hasAuthorized('viewUserCartsList')) {?>
                        <li><span class="glyphicon glyphicon-user"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>user.php?group=nonemptycart">Müşteri Sepetleri</a></li>
                        <?php } ?>
                        <?php if($userObj->hasAuthorized('viewLogs')) {?>
                        <li><span class="glyphicon glyphicon-log-in"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>log.php">Kullanıcı Logları</a></li>
                        <?php } ?>
                        <?php if($userObj->hasAuthorized('viewSearch')) {?>
                        <li><span class="glyphicon glyphicon-search"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>search_log.php">Arama Kayıtları</a></li>
                        <?php } ?>
                        <li><span class="glyphicon glyphicon-thumbs-up"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH."crm.php"; ?>">CRM</a></li>
                    </ul>
                </div>
            </div>    
            <div id="product_panel" class="panel panel-default admin_panel_group">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-cog"></span> Ürün Yönetimi</h3>
                </div>
                <div class="panel-body">
                    <ul>
                        <?php if($userObj->hasAuthorized('viewProduct')) {?>
                        <li><span class="glyphicon glyphicon-cog"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>product.php">Ürün Listesi</a></li>
                        <?php } ?>
                        <?php if($userObj->hasAuthorized('viewCategory')) {?>
                        <li><span class="glyphicon glyphicon-folder-open"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>category.php">Kategori Düzenleme</a></li>
                        <?php } ?>
                        <?php if($userObj->hasAuthorized('viewStockTracking')) {?>
                        <li><span class="glyphicon glyphicon-exclamation-sign"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>stock_tracking.php">Stok Takibi</a></li>
                        <li><span class="glyphicon glyphicon-send"></span> <a href="<?php echo BASE_PATH.ADMIN_PATH; ?>supplier_order.php">Tedarikçi Siparişleri</a></li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
            <div id="other_panel" class="panel panel-default admin_panel_group">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-cog"></span> Diğer</h3>
                </div>
                <div class="panel-body">
                    <ul>
                        <?php if($userObj->hasAuthorized('viewFeedback')) {?>
                        <li><span class="glyphicon glyphicon-comment"></span> <a href="<?php echo BASE_PATH . ADMIN_PATH."feedback.php"; ?>"><?php echo _('Geri Bildirim'); ?></a></li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
                <div class="clearfix"></div>
            </div>    
        </div>

我的css脚本

#admin_panel_index {margin:0 auto !important!; float:none important!;}
.admin_panel_group{float:left; width:200px; height: 200px; margin: 10px;}

我的结果如下，适用于不同的屏幕尺寸。

我可以做些什么来解决这个问题？

Answer 1

删除您的 CSS并让Bootstrap为您完成。对于不同尺寸的自定义居中，请查看column offsets

小提琴：http://jsfiddle.net/timgavin/Lev8a0fy/

<div class="container">

    <div class="row">

        <div class="col-sm-6 col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">HEADING</div>
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut amco laboris nisi ut </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">HEADING</div>
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut amco laboris nisi ut </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">HEADING</div>
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut amco laboris nisi ut </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">HEADING</div>
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut amco laboris nisi ut </div>
            </div>
        </div>

    </div>

</div>

响应式设计中的中心盒子

1 个答案: