- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我一点也不擅长设计,我只是想在 Bootstrap 4 中进行简单的表单对齐;我根本没有做任何定制,只是很乐意接受框架给我的任何东西。
我已经通读了表单文档,变体的数量非常困惑,到目前为止,我尝试的一切都以某种方式失败了。
我有一个包含多行的表单,每行包含三个元素:标签;一个 size=60 的文本字段(尽管我猜这可能只是一个近似值);和一个选择列表。就是这样。我不希望这些元素之间有任何额外的空间,因此使用网格系统似乎不是正确的解决方案。
我想到的最接近的是:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="form-group row">
<div class="col-auto col-form-label"><label for="dishes-0-dish">Dish</label></div>
<div class="col-auto">
<input class="form-control" id="dishes-0-dish" name="dishes-0-dish" size="60" type="text" value="">
</div>
<div class="col-auto">
<select id="dishes-0-type" name="dishes-0-type"><option value="13">Cheese</option><option value="6">Dessert</option><option value="3">Fish</option><option value="12">Meat</option></select>
</div>
</div>
[the above is repeated five times, with different index numbers]
<div>
<input class="btn" value="Add" name="choice" type="submit" />
</div>
</div>
但是,标签看起来太高,与文本字段的顶部对齐,并且看起来延伸得太低(如果我添加另一个类以使标 checkout 现在不同颜色的背景上)。同样,选择框也与文本域的顶部对齐,并且只占据文本域垂直空间的一半。并且“添加”按钮未与任何内容对齐。
我应该如何正确设计它?谢谢。
编辑:这在 Chrome 中对我来说是这样的
显示垂直对齐不佳,提交按钮未对齐。我无法真正展示我做想要的东西的图像,因为我不是设计师;同样,我对一些没有任何明显缺陷的通用设计很满意,就像这个一样。
再次编辑:这具有建议的 form-control
,它修复了选择和输入按钮的对齐方式(谢谢!),并且使用 col
而不是col-auto
在文本和选择字段上。但是,现在选择字段太长了。
如果我将 col-auto
放在选择上,那么它是一个合理的大小,但文本字段是巨大的(不是我指定的 60)。在两者上都返回 col-auto
是合理的,我可能会留在这里。
对于这两个,除了黄色背景和一些通用字体之外,我已经取消了其他 CSS;没有其他与对齐有关的东西。现在这个标签看起来很沉闷; Bootstrap 中的通用标签是否具有如此少的样式?无论如何,我认为大部分问题都解决了;感谢您的帮助!
最佳答案
如果您在标签上使用 col-auto
,它将使列适合标签大小,然后如果您只有 col
用于其他两个输入,那么它们将在同一行上大小均匀。我还取消了自动应用于标签的 margin-bottom
并添加了 vertical-align:middle;
以使其与其他输入对齐。
label{
margin-bottom:0;
vertical-align:middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="form-group row">
<div class="col-auto col-form-label"><label for="dishes-0-dish">Dish</label></div>
<div class="col">
<input class="form-control" id="dishes-0-dish" name="dishes-0-dish" size="60" type="text" value="">
</div>
<div class="col">
<select id="dishes-0-type" name="dishes-0-type" class="form-control"><option value="13">Cheese</option><option value="6">Dessert</option><option value="3">Fish</option><option value="12">Meat</option></select>
</div>
</div>
[the above is repeated five times, with different index numbers]
<div>
<input class="btn" value="Add" name="choice" type="submit" />
</div>
</div>
关于css - 简单的设计 : tight horizontal form rows in Boostrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49493900/
一个屏幕上有多个横向的Recyclerview。我想在第一个水平 Recyclerview 的第一个项目上执行 espresso click 事件。请告诉我如何实现它。 onView(withId(
我目前正在为一个网站开发移动样式表,但我遇到了一个我无法解释的奇怪问题: 即使我的样式表中不再有“宽度”定义,Android 浏览器会在右侧留下大量空白区域,导致出现滚动条。 我不知道是什么原因导致的
我有一个由 graphviz 工具制作的无向图(现在我正在使用 sfdp ): digraph structs { node [shape=Mrecord, URL="index_ne
关闭。这个问题需要details or clarity .它目前不接受答案。 想改善这个问题吗?通过 editing this post 添加详细信息并澄清问题. 8年前关闭。 Improve thi
假设我有一行单元格,其中包含以下值: B2: "banana" C2: "orange" D2: "apple" 我把这个范围变成一个二维数组。我的主要代码在Word文档中: dim MySheet
我正在创建一个基于位置的提醒,EKReminder。 对于坐标,我使用 CLGeocoder 将地址转换为 CLLocation。 就提醒本身而言,我认为有两个因素决定了提醒将触发的“区域”(半径/圆
我有一个问题可以用一个很像 SO 的系统来模拟:帖子和标签。要获得我的帖子,我可能会这样做: SELECT title, body, author FROM posts WHERE id = ? 然后
我希望将结果生成到水平联合中。我能够组合在一起并生成结果。但是,我需要以预期结果格式显示结果。 SQL (SELECT kpa_id AS 'KPA', SUM(weightage) AS '
我正在研究 CMS 模板,并尝试找出这是否可行。我在网上找不到任何东西,也许我只是使用了错误的关键字。 给出这个模型: http://img833.imageshack.us/img833/4979/
我有一个 LTR 方向的 Bootstrap v4.0.0 模板,我想将整个模板更改为 RTL 方向,我使用了以下这些方法: body { direction:rtl; } html { dire
嗯,几秒钟前还好,但现在当我指向“水平”时,它总是说“水平无法解析或不是一个字段”。我已经删除了旧项目并创建了一个新项目,但仍然遇到这个问题。有人能告诉我发生了什么事吗?谢谢。我正在使用 eclips
我正在寻找一种仅在 html 表格 View 中水平或垂直滚动同时保持始终可见的标题和行的方法。最好我想要类似于 this 的东西但在没有 ember 或 coffeescript 的纯 Java
每当我需要定位某些东西使其垂直和/或水平时,我通常会求助于 flexbox,如果那不是解决方案,我会使用 position: absolute 和 top:50%; 和/或 left:50%; 与 t
我想创建一个从右向左滚动然后从左侧消失并再次从右侧重新出现的 TextView。我可以使用动画??谢谢 最佳答案 我相信您希望您的 TextView 成为选取框。如果是这样,我就是这样做的: 在 XM
我只需要在屏幕上平行放置两个按钮(每个按钮的宽度为 50dp)。第一个应该有 margin left 10dp 并且放置没问题。 但是第二个按钮应该放置在屏幕中,并在中间(水平)向左留出 30dp 的
新的Bootstrap 三个文档explains the grid behaviour作为超小型设备的“始终水平”。这是什么意思?在小型设备上,所有列肯定会垂直堆叠在一起吗?在这里让我失望的是我(缺乏
我需要一些帮助来隐藏我的水平滚动条并仍然能够滚动。我使用过 webkit,但在 IE 和 firefox 中不起作用。我看到很多关于垂直滚动条的帮助,但不适用于水平滚动条。有帮助吗? 更新:我创建了一
为什么不支持水平滚动?
在 examples page当您搜索(CTRL+F)图片库并单击第一张图片时,您可以使用下一个/上一个箭头浏览此图片库。它们之间的动画是垂直的——图像垂直飞行。如何让它们水平飞行? 在我找到的帮助中
我在移动网站上使用 Owl Carousel。 当用户水平滚动然后停止时,内容立即停止移动(或停止后不久)。 是否可以添加一些惯性? 我尝试了文档中公开的不同选项,例如 smartSpeed , fl
我是一名优秀的程序员,十分优秀!