Question

在UIKit上，如何创建带有嵌入式文本的电子邮件表单，以便用户可以输入文本，并且表单后面带有@ example.com。

您可以在此处进行引导：https://getbootstrap.com/docs/4.0/components/input-group/

但是我无法在UiKit上重新创建它吗？

Answer 1

只是从引导中“借用”这个概念。将元素包装在网格内，用类名将它们分组，并在带有flexbox显示的组添加元素内，它将自动适应。根据我在消息来源中看到的-他们给他1％的宽度-也许有这种情况，但是无论如何只能使用display：flex。

这是我的主张：

HTML

<form class="uk-grid-small" uk-grid>

    <div class="uk-width-1-2@s input-group">
        <input class="uk-input" type="text" placeholder="50">
      <div class="input-group-append">
        <div class="input-group-text">
          @email
        </div>
      </div>
    </div>
</form>

CSS

.input-group {
  display: flex;
}
.input-group-append {
  display:flex;
  align-items:center;
}
.input-group-text {
    display: flex;
    align-items: center;
    font-weight: 400;
    height:38px;
    color: #495057;
    padding: 0 10px 0;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
  border-left:none;
}

我也为参考https://codepen.io/arysom/pen/QzGjyo

制作了一个代码笔

获取UIKit-使用电子邮件地址附加表单

1 个答案: