1

我正在尝试使用MetroUI制作一个网格，其中它是 Windows Metro tile 格式的 3 列。第一列有两个垂直堆叠的宽瓷砖。第二列是一个大瓷砖旋转木马。然后第三列又是两个垂直堆叠的宽瓷砖。这段代码看起来不错，但是在调整浏览器大小时，它会与图块和轮播重叠。布置这个的正确方法是什么？也尝试使用 Bootstrap 网格，但随后获得了很大的利润。

<div class="container main-tiles-2">
<div class="tile-area no-padding">
    <div class="tile-container bg-color-tile-light-pantone" style="width: 100%">
        <div class="flex-grid">
            <div class="row cells3 cell-auto-size">
                <div class="tile-container no-padding" style="width: 28%">
                    <div class="tile-wide bg-darkBlue fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-calendar"></span>
                            <span class="tile-label">Calendar</span>
                        </div>
                    </div>
                    <div class="tile-wide bg-orange fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-users"></span>
                            <span class="tile-label">Room Bookings</span>
                        </div>
                    </div>
                </div>
                <div class="cell tile-large ol-transparent" data-role="tile">
                    <div class="tile-content">
                        <div class="carousel" data-role="carousel" data-height="100%" data-width="100%"
                             data-controls="false">
                            <div class="slide">
                                <img src="images/main%20image.jpg" data-role="fitImage"
                                     data-format="fill"
                                     alt="Picture of the Day One">
                            </div>
                            <div class="slide">
                                <img src="images/scenery1.jpg" data-role="fitImage" data-format="fill"
                                     alt="Picture of the Day One">
                            </div>
                            <div class="slide">
                                <img src="images/scenery2.jpg" data-role="fitImage" data-format="fill"
                                     alt="Picture of the Day One">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tile-container no-padding" style="width: 33%">
                    <div class="tile-wide bg-darkTeal fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-list2"></span>
                            <span class="tile-label">News</span>
                        </div>
                    </div>

                    <div class="tile-wide bg-cobalt fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-books"></span>
                            <span class="tile-label">Staff Contacts</span>
                        </div>
                    </div>
                </div>

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

像这样它看起来只是没有很好地调整大小：

布局

4

1 回答 1

1

覆盖 CSS 以更改网格的边距并将图块的宽度填充到可用的网格空间的更大尺寸。调整大小现在可以完美地工作。

<!-- First row of tiles -->
<div class="container">
<div class="row">
    <div class="col-md-4 col-xs-12 my-column">
        <div class="tile-wide bg-darkBlue fg-white" data-role="tile">
            <div class="tile-content iconic">
                <span class="icon mif-calendar"></span>
                <span class="tile-label">Calendar</span>
            </div>
        </div>
        <div class="tile-wide bg-orange fg-white" data-role="tile">
            <div class="tile-content iconic">
                <span class="icon mif-users"></span>
                <span class="tile-label">Room Bookings</span>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-12 my-column">
        <div class="tile-large ol-transparent" data-role="tile">
            <div class="tile-content">
                <div class="carousel" data-role="carousel" data-height="100%" data-width="100%"
                     data-controls="false">
                    <div class="slide">
                        <img src="images/main%20image.jpg" data-role="fitImage"
                             data-format="fill"
                             alt="Picture of the Day One">
                    </div>
                    <div class="slide">
                        <img src="images/scenery1.jpg" data-role="fitImage" data-format="fill"
                             alt="Picture of the Day One">
                    </div>
                    <div class="slide">
                        <img src="images/scenery2.jpg" data-role="fitImage" data-format="fill"
                             alt="Picture of the Day One">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-12 my-column ">
        <div class="tile-wide bg-darkTeal fg-white" data-role="tile">
            <div class="tile-content iconic">
                <span class="icon mif-list2"></span>
                <span class="tile-label">News</span>
            </div>
        </div>

        <div class="tile-wide bg-cobalt fg-white" data-role="tile">
            <div class="tile-content iconic">
                <span class="icon mif-books"></span>
                <span class="tile-label">Staff Contacts</span>
            </div>
        </div>
    </div>
</div>

和 CSS

.row {
  padding-bottom: 0px;
  padding-top: 0px;
  margin: 0px;

}
.my-column {

  padding-top: 1px;
  padding-bottom: 1px;
  padding-right: 2px;
  padding-left: 1px;
}


/**
Overrides Metro UI Css
*/
.tile-large {
  width: 99%;
  font-size: 20px;
  font-family: "Helvetica Neue";

}

.tile-wide {
  width:99%;
  font-size: 20px;
  font-family: "Helvetica Neue";
}

.tile {
  width: 99%;
  font-size: 20px;
  font-family: "Helvetica Neue";
}
于 2016-02-28T10:14:31.653 回答