Question

我们有一个Angular网站，并且在仪表板上有多个部分。在全屏上，它们以2列显示。右栏正确显示，没有任何异物，但当右框较大时，左栏有空隙。我已经附上了一个可以显示这些差距的小矮人。我尝试了多种配置，但似乎无法使左列与右列相同。确保将预览扩大到足以容纳两列。

Plunker Example

template.html

<head>
</head>

<body>
    <div>
        <h2>Hello {{name}}</h2>
    </div>

    <div id="wrapper">
        <!-- Main page wrapper -->
        <div id="page-wrapper" class="gray-bg">
            <!-- Main view/routes wrapper-->
            <div class="wrapper wrapper-content">

                <div class="row">
                    <div class="content" fxLayout="row" fxLayout.xs="column">
                        <div fxFlexOrder="0">
                            <div class="col-sm-6 sec1">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 1 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 1 content</h2>
                                        <h2>Box 1 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div fxFlexOrder="1">
                            <div class="col-sm-6 sec2">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 2 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 2 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div fxFlexOrder="2">
                            <div class="col-sm-6 sec3">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 3 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 3 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div fxFlexOrder="3">
                            <div class="col-sm-6 sec4">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 4 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 4 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>




                        <div fxFlexOrder="5">
                            <div class="col-sm-6 no-padding sec5">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 5 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 5 content</h2>
                                        <h2>Box 5 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div fxFlexOrder="6">
                            <div class="col-sm-6 sec6">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 6 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 6 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <!-- End wrapper-->
    </div>

</body>

</html>

css

.sec1 {
  background: red;
  color:white;
  text-transform: uppercase
}

.sec2 {
  background: yellow;
  color:blue;

}

.sec3 {
  background: blue;
  color:white;
  text-transform: uppercase
}

.sec4 {
  background: green;
  color:white;
  text-transform: uppercase
}

.sec5 {
  background: purple;
  color:white;
  text-transform: uppercase
}

.sec6 {
  background: orange;
  color:white;
  text-transform: uppercase
}

角度弯曲布局未正确包装

0 个答案: