UIKIT Grid 列不彼此相邻答案

【问题标题】：UIKIT Grid columns not staying adjacent to each otherUIKIT Grid 列不彼此相邻
【发布时间】：2015-02-28 00:22:35
【问题描述】：

我正在使用 uikit 2.8.0。我正在尝试创建一个两列网格结构。但是这两列看起来并不相邻。第二列从第一列向下滑动。

<body>
<div class="uk-container uk-container-center uk-margin-large-bottom">
<nav var code.......>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1 uk-text-center">
<h1>Tell us more about yourself</h1>
</div>
</div>

<div class="uk-grid" data-uk-grid-match="{target:'.equal-height'}">
<div class="uk-width-large-6-10" style="margin: 0 20% 0 20%;">
<div class="uk-width-7-10 uk-width-small-1-1 uk-width-medium-7-10 uk-width-large-7-10"    style="border: 1px solid #B4B3B3;height:100px;">
</div>
<div class="uk-width-3-10 uk-width-small-1-1 uk-width-medium-3-10 uk-width-large-3-10" style="border: 1px solid #B4B3B3;height:100px;">
</div>
</div>
</div>
</div>

我尝试了很多选择。但无论如何，第二个网格不会与第一个网格并排。

我该如何解决这个问题？有什么工具可以用来调试布局吗？我正在使用 chrome 开发人员工具，但没有成功。

【问题讨论】：

在 2.20 版中，我的项目也出现了同样的问题。有什么想法吗？

标签： html getuikit

【解决方案1】：

您需要将类“.uk-grid”添加到具有样式边距 (uk-width-large-6-10) 的 div，因为您想在该元素内创建一个网格。

此外，“Target”元素应该定位到现有的东西，最好将“uk-panel”放置在带有“uk-width”的元素内。

<div class="uk-container uk-container-center uk-margin-large-bottom">
<nav var code.......>
<div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-medium-1-1 uk-text-center">
        <h1>Tell us more about yourself</h1>
    </div>
</div>

<div class="uk-grid">
    <div class="uk-width-large-6-10 uk-grid" style="margin: 0 20% 0 20%;"  data-uk-grid-match="{target:'.uk-panel'}">
        <div class="uk-width-7-10 uk-width-small-1-1 uk-width-medium-7-10 uk-width-large-7-10"    style="background-color:green; height:100px;">
            <div class="uk-panel"> </div>
        </div>
        <div class="uk-width-3-10 uk-width-small-1-1 uk-width-medium-3-10 uk-width-large-3-10" style="background-color:red; height:100px;">
            <div class="uk-panel"> </div>
        </div>
    </div>
</div>

【讨论】：