Question

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

Answer 1

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

另外，“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>

UIKIT Grid列彼此不相邻

1 个答案: