使用 getuikit 框架使第二列展开答案

【问题标题】：Make the second column expand by using getuikit framework使用 getuikit 框架使第二列展开
【发布时间】：2019-08-26 03:10:42
【问题描述】：

我在一行中有两列。我希望第一列是文本段落，第二列是文本区域。

第一列的宽度是行宽的10%；然后第二个向右扩展。所以我把列放到uikit网格中。

uikit document，我有下面的代码

<hello name="{{ name }}"></hello>
<p>
   Start editing to see some magic happen :)
</p>
<div uk-grid class="uk-grid">
   <div class="uk-width-1-10" style="background: red;">
     <p>lorem</p>
  </div>
 <div class="uk-width-9-10" style="background: blue;">
   <textarea></textarea>
 </div>
</div>

现在的问题是两列都占据了整行。宽度不是 10% vs 90%

Please see the demo on stackblize

我想使用 uikit 框架(https://getuikit.com/docs/width) 而不是通用的 css。

【问题讨论】：

标签： javascript html css getuikit

【解决方案1】：

Div 是块元素，这意味着默认情况下它们会占据整个宽度。通过在 style 属性中定义以下 css 属性使它们成为内联元素。

display: inline-block;

【讨论】：

我不想使用自定义 css。我更喜欢使用uikit
使用这个类然后“uk-display-inline-block”
但是为什么uikit链接没有这样的东西。
我的意思是在 uikit 示例中，他们只是直接使用 uk-width-1-10 之类的东西，然后可以代替 inline-block。你能看一下这个例子并在stackblitz中展示给我看吗？
发现 2 个问题 a) uikit 类不工作。 b) uk-width-1-10 类不存在。直接将uikit css注入html并尝试使用uk-width-1-4类。为我工作。
开始编辑，看看会发生什么:)

lorem

cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/…>

【解决方案2】：

使用CSS网格布局模块

check this site

.grid-container {
  display: grid;
  grid-template-columns: 10% 90%;
  background-color: #2196F3;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

<div class="grid-container">
  <div class="grid-item">I'm here</div>
  <div class="grid-item" style="text-align: right;"><input type="text"></div>
</div>

【讨论】：

我不想使用自定义 css。我更喜欢使用uikit