Bootstrap 类来调整面板的宽度

Question

我在仪表板中使用引导面板，因此我必须内联放置 5 个引导面板，因此我尝试了 class="col-lg-2 col-md-3" 或 class="col-lg-3 col-md-3" 这两个类，但这两个类仅适用于 4 或6 但它不适用于像 5 和 7 这样的奇数所以我尝试了像 style="width: 200px" 这样的内联 css 但它不适用于所有浏览器所以我现在该怎么办。

我为此附上了一张快照，请看一下。 snap Img

目前为止我尝试过的

<section class="content">
<!-- Small boxes (Stat box) -->
    <div class="row">
        <div class="col-lg-2 col-md-3" style="width: 220px">
            <!-- small box -->
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>
                        <span id=claimedAmount></span>
                    </h3>
                    <p>Total Claimed</p>
                </div>
                <div class="icon">
                    <i class="fa fa-inr bg-icon"></i>
                </div>
                <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info 
                <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>

        <div class="col-lg-2 col-md-3" style="width: 220px">
            <!-- small box -->
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>
                        <span id=pendingAmount></span>
                    </h3>

                    <p>Pending Approval</p>
                </div>
                <div class="icon">
                    <i class="fa fa-inr bg-icon"></i>
                </div>
                <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info 
                <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-2 col-md-3" style="width: 220px">
            <!-- small box -->
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>
                        <span id=settledAmount></span>
                    </h3>
                    <p>Settled</p>
                </div>
                <div class="icon">
                    <i class="fa fa-inr bg-icon"></i>
                </div>
                <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info 
                <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-2 col-md-3" style="width: 218px">
            <!-- small box -->
            <div class="small-box bg-navy">
                <div class="inner">
                    <h3>
                        <span id=pendingSettledAmount></span>
                    </h3>

                    <p>Pending Settlement</p>
                </div>
                <div class="icon">
                    <i class="fa fa-inr bg-icon"></i>
                </div>
                <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info 
                <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <!-- ./col -->    
        <!-- ./col -->
        <div class="col-lg-2 col-md-3" style="width: 218px">
            <!-- small box -->
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>
                        <span id=rejectedAmount></span>
                    </h3>

                    <p>Rejected</p>
                </div>
                <div class="icon">
                    <i class="fa fa-inr bg-icon"></i>
                </div>
                <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info
                <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>
    <!-- /.row -->
    <!-- Main row -->
</section>

Answer 1

尝试下面的代码并删除内联 css，并查看 Updeted Bootply Demo

HTML：

<section class="content">
    <!-- Small boxes (Stat box) -->
                <div class="row"> 
                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-primary">
                            <div class="inner">
                                <h3>
                                    <span id=claimedAmount></span>
                                </h3>

                                <p>Total Claimed</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-yellow">
                            <div class="inner">
                                <h3>
                                    <span id=pendingAmount></span>
                                </h3>

                                <p>Pending Approval</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-green">
                            <div class="inner">
                                <h3>
                                    <span id=settledAmount></span>
                                </h3>

                                <p>Settled</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>

                    <!-- ./col -->
                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-navy">
                            <div class="inner">
                                <h3>
                                    <span id=pendingSettledAmount></span>
                                </h3>

                                <p>Pending Settlement</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <!-- ./col -->


                    <!-- ./col -->
                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-red">
                            <div class="inner">
                                <h3>
                                    <span id=rejectedAmount></span>
                                </h3>

                                <p>Rejected</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
                <!-- Main row -->

            </section>

Answer 2

<div class="row">
    <div class="col-md-2 col-md-offset-1">1</div>
    <div class="col-md-2">2</div>
    <div class="col-md-2">3</div>
    <div class="col-md-2">4</div>
    <div class="col-md-2">5</div>
</div>

Answer 3

您可以使用 css flex 属性来正确对齐所有列，而不是使用引导程序，如下所示：

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>




 <style>
    .flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }

    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
 </style>

试试这个，希望对你有帮助。