我看到 Bootstrap (form-horizontal
) 中有水平示例,但语义 UI 似乎只有标签位于输入上方的表单布局。
最佳答案
在文档部分,您可以找到 Semantic UI form inline和 Grouped fields类似于 Twitter Bootstrap 的 form-horizontal。
要在表单中创建新的字段行,请将元素包装在 <div class="inline field"> </div>
中
/* Code added for presentation in SO snippet, ignore this CSS */
* > div,
h1 {
margin-left: 20px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet" />
<h1>Single</h1>
<div class="ui form">
<div class="inline field">
<label>Last name</label>
<input placeholder="Full Name" type="text">
</div>
<div class="inline field">
<label>Last name</label>
<input placeholder="Full Name" type="text">
</div>
</div>
<h1>Grouped</h1>
<div class="ui form">
<div class="inline fields ui grid container centered">
<label class="four wide column">Lengthy Phone numbers</label>
<div class="field four wide column">
<input type="text" placeholder="(xxx)">
</div>
<div class="four wide column field">
<input type="text" placeholder="xxx">
</div>
</div>
<div class="inline fields ui grid container centered">
<label class="four wide column">Phone Number</label>
<div class="four wide column field">
<input type="text" placeholder="(xxx)">
</div>
<div class="field four wide column">
<input type="text" placeholder="xxx">
</div>
</div>
</div>
关于semantic-ui - 如何在语义 UI 中创建水平表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32566974/