Question

我正在为我的仪表板使用Bootstrap面板，所以我必须将5个引导面板内联，所以我尝试了class="col-lg-2 col-md-3"或class="col-lg-3 col-md-3"这两个类，但这两个类只能用于偶数不喜欢4或6，但它不适用于5和7之类的奇数n所以我尝试了类似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

<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 2

尝试使用以下代码并删除内联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 3

您可以使用css flex属性来正确对齐所有列，而不是使用bootstrap：

fileUploadAll(file) {
        var fileFormData = new FormData();
        fileFormData.append('file', file);
        return this.promiser.post('/api/fileUpload', fileFormData, {transformRequest: angular.identity, headers: {'Content-Type': undefined}});

试试这个，我希望它会对你有所帮助。

用于调整面板宽度的Bootstrap类

3 个答案: