Firefox上的引导程序布局已损坏

时间:2018-06-20 10:45:11

标签: bootstrap-4

enter image description here我的引导站点(引导3)在chrome / edge / opera上运行正常,但是在firefox网格布局上加载得很好,然后一秒钟都坏了吗?

enter image description here

<!-- Main content -->
<section class="content">

      ****Main row****

<div class="row">
    <div class="col-lg-4 col-md-4" style="overflow:hidden;">    
        <div class="col">
          <!-- members -->
          <div class="info-box red-bg">
              <div class="info-box-content">
                <span class="info-box-text"><strong>Total Members</strong></span>
                <span class="info-box-number text-white"><?php echo count($clients); ?></span>

                <hr>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->

            <!-- /.info-box -->
          <div class="info-box orange-bg">
            <div class="info-box-content">
              <span class="info-box-text"><strong>Active Members</strong></span>
              <span class="info-box-number text-white"><?php echo count($clients)-2; ?></span>

              <hr>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->

          <!-- /.info-box -->
          <div class="info-box yellow-bg">
            <div class="info-box-content">
              <span class="info-box-text"><strong>Inactive Members</strong></span>
              <span class="info-box-number text-white">2</span>

              <hr>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
          <!-- ./members -->
        </div>
    </div> 
      <div class="col-lg-8 col-md-8" style="overflow:hidden;">   
        <div class="col">
          <!-- Subscriptions -->
          <div class="box border-two">
            <div class="box-header" style="color:white; background-color: #b2b2b2;">
              <h3 class="box-title">Subscriptions to Expire</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive">
                <table id="subscriptions" class="table table-bordered table-striped">
                  <thead style="color:#9e9e9e; background-color:#ffffff;">
                  <tr>
                    <th>Full Name</th>
                    <th>Package</th>
                    <th>Expiry in</th>
                    <th>Mail a Notification</th><!--new-->
                    <th>View Profile</th><!--new--> 
                  </tr>
                  </thead>
                  <tbody>

                    <?php foreach ($clients as $c): ?>
                      <tr>
                          <td><?php echo $c->first_name.' '.$c->last_name; ?></td>
                          <td>Package 01</td>
                          <td>4 days</td>
                          <td><a href="<?php echo base_url(); ?>welcome/viewProfile/<?php echo $c->id; ?>"><img class="img-responsive" width="30" style="margin-left:60px;" src="<?php echo base_url()?>assets/dist/img/send.png"/></a></td><!--new-->
                          <td><a href="<?php echo base_url(); ?>welcome/viewProfile/<?php echo $c->id; ?>"><img class="img-circle" width="30" style="margin-left:30px;" src="<?php echo base_url()?>assets/dist/img/table-profile.png"/></a></td><!--new-->


                        </tr>
                    <?php endforeach ?>

                  </tbody>
                </table>

            </div>
            <!-- /.box-body -->
          </div>
          <!-- ./Subscriptions -->
        </div>
    </div>      




        <!--SALES GRAPH AND UPCOMMING COURSES-->

    <div class="col-lg-7" style="overflow:hidden;"> 
        <!-- Left col -->
       <section class="col connectedSortable">
          <!-- Custom tabs (Charts with tabs)-->
          <!-- solid sales graph -->
          <div class="box box-solid dark-gray-bg">
            <div class="box-header">
              <i class="fa fa-th"></i>

              <h3 class="box-title">Sales Graph</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn dark-gray-bg btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn dark-gray-bg btn-sm" data-widget="remove"><i class="fa fa-times"></i>
                </button>
              </div>
            </div>
            <div class="box-body border-radius-none">
              <div class="chart active" id="line-chart" style="height: 250px;">
                <div class="chart " id="revenue-chart" style="position: relative; height: 300px;"></div>
              <!-- <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div> -->
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

          <!-- /.nav-tabs-custom -->
        </section>


        <section class="col connectedSortable" style="overflow:hidden; background-color:#b3b3b3; padding:0;">
          <div class="box box-solid" style="background-color:#b3b3b3;" >
            <div class="box-header">
              <!--<i class="fa fa-th"></i>-->

              <h3 class="box-title">UPCOMING COURSES</h3>

              <div class="box-tools pull-right">
                <!-- OLD BUTTONS -->
              </div>
            </div>




                  <?php for ($i=0; $i < 6; $i++) { ?>
                    <!-- event 1 -->
                        <div class="" style="width:100%;">
                            <div class="col-lg-4 col-md-6 col-sm-12 media"  style="padding-bottom:20px;">
                                <div class="training-box" style="padding-left:15px;">
                                    <h2 class="text-white text-uppercase course-type">Crossfit</h2>
                                    <p class="text-white text-uppercase date mb-0">15 jan 2018</p>
                                    <p class="text-white time mb-0">19:00</p>
                                    <p class="text-white spaces-left mb-0">12 spaces left</p>
                                    <div class="training-box-span">
                                        <span><a href="#"  onclick="alert('Cancel')" >x</a></span>
                                        <span><a href="#" onclick="alert('Delete')"><i class="fa fa-trash-o"></i></a></span>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="" style="width:20;"><!--emptyyy--></div>



                    <!-- / event 1 -->
                  <?php } ?>   

            </div>
        </section>
     </div>




        <!--NEW CLIENTS AND SEND MAIL TO OUR CLIENTS -->

    <div class="col-lg-5"> 
        <section class="col connectedSortable">
               <!-- /.info-box -->


          <!-- USERS LIST -->
              <div class="box border-two new-clients">
                <div class="box-header with-border">
                  <h3 class="box-title">New Clients</h3>


                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                  <ul class="users-list clearfix">

                  <?php foreach ($newest as $new): ?>
                    <li class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                      <?php if ($new->picture_url == ""): ?>
                        <img class="img-responsive" src="https://i0.wp.com/www.calvary.edu/wp-content/uploads/2016/08/person-placeholder.jpg" alt="User Image">
                      <?php else: ?>
                        <img class="img-responsive" src="<?php echo $new->picture_url; ?>" alt="User Image">
                      <?php endif ?>

                      <!-- <a title="<?php echo $new->first_name.' '.$new->last_name; ?>" class="users-list-name" href="<?php echo base_url(); ?>welcome/viewProfile/<?php echo $new->id; ?>"><?php echo $new->first_name.' '.$new->last_name; ?></a> -->
                      <!-- <span class="users-list-date"></span> -->
                    </li>
                  <?php endforeach ?>

                  </ul>
                  <!-- /.users-list -->
                </div>
                <!-- /.box-body -->

                <!-- /.box-footer -->
              </div>
              <!--/.box -->

          </section>

          <!-- right col -->

      <!-- /.row (main row) -->




        <!--SEND AN EMAIL TO OUR CLIENTS-->



        <section class="col connectedSortable mt-5">
          <div class="box box-solid " style="background-color: #e62249;">
            <div class="box-header">
              <i class="fa fa-th" style="visibility: hidden;"></i>

              <h3 class="box-title"></h3>

              <div class="box-tools pull-right">
                <!-- OLD BUTTONS -->
              </div>
            </div>

            <div id="redBoxDashboard" class="box-body border-radius-none" onclick="location.href = '<?php echo base_url(); ?>welcome/compose'; ">
              <div class="col-md-12" style="color: white;">
                <img src="<?php echo base_url()?>assets/dist/img/send-mail-white.png" alt="Send Mail" />
                <h4 style="font-weight: bolder;">SEND AN EMAIL TO YOUR CLIENTS</h4>               
              </div>
            </div>

          </div>
        </section>
    </div> 

 </div>          




    </section>

这是代码,如果您不看php代码,这是非常基本的网格布局。 两部分:左一较大,右一较小

1 个答案:

答案 0 :(得分:0)

已解决:)

Admin LTE主题(引导主题)肯定存在问题 我使用仅在mozzilla浏览器上有效的规则,并通过媒体查询手动解决了该问题!

@-moz-document url-prefix() {
@media only screen and (min-width: 980px) and (max-width: 1199px) {
    .box {
      width: 60%!important;
    }
}
}