个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
具有输入的行比其他行接缝更宽(例如按钮)。
http://jsfiddle.net/ujnw8x4p/2/
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div tabindex="-1" role="dialog" class="modal" size="lg" index="0" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Bootstrap Modal with horizontal form and input addon</h3>
</div>
<div class="modal-body ng-scope">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputLinkPp" class="hidden-xs col-sm-3 control-label">Website</label>
<div class="input-group col-sm-9 xs-margin">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" id="inputLinkPp" placeholder="link to your page"/>
</div>
</div>
<div class="form-group">
<p class="col-sm-offset-3 col-sm-9" style="text-align: right">
<button type="button" class="btn btn-success">
<i class="glyphicon glyphicon-link"></i> Create</button>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>输入组插件似乎不遵守模态填充。但也许我不应该以水平形式使用我们的输入组？
有什么想法吗？
最佳答案
我只使用 Bootstrap 类想出了这个。看起来它可以满足您的需求，唯一的问题是 <label> 上的垂直对齐方式与 <input> 不匹配.需要一些自定义 css 来覆盖它。这是代码:
<div class="container">
<div tabindex="-1" role="dialog" class="modal" size="lg" index="0" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Bootstrap Modal with horizontal form and input addon</h3>
</div>
<div class="modal-body ng-scope">
<div class="row">
<div class="col-xs-2 text-right" >
<label>Website</label>
</div>
<div class="col-xs-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" id="inputLinkPp" placeholder="link to your page"/>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-12 text-right">
<div class="form-group">
<button type="button" class="btn btn-success">
<i class="glyphicon glyphicon-link"></i> Create</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
哦，我不小心删除了 <form>标签，因此需要将其添加回去。这是指向 Bootply 的链接:
希望对您有所帮助!
关于html - Bootstrap : Modal with horizontal form and input addon does not layout properly，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28238597/
25
4
0
一个屏幕上有多个横向的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
我是一名优秀的程序员,十分优秀！