1

我正在使用 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 开发人员工具，但没有任何成功。

4

1 回答 1

1

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

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

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

于 2014-07-28T11:32:57.937 回答