关键词:
【中文标题】Bootstrap 4内联表单全宽【英文标题】:Bootstrap 4 inline form full width 【发布时间】:2017-08-08 05:56:47 【问题描述】:我有一个带有搜索栏和旁边的搜索按钮的内联表单。如何强制 input-group
div 跨越 Bootstrap 4 中的整个列,最好不使用自定义 CSS?
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
<div class="input-group">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
<span class="input-group-btn">
<input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
</span>
</div>
</form>
</div>
</div>
</div>
【问题讨论】:
【参考方案1】:2018 年更新
删除form-inline
..
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="" accept-charset="UTF-8" method="get">
<div class="input-group">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
<span class="input-group-btn">
<input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
</span>
</div>
</form>
</div>
</div>
</div>
演示:http://www.codeply.com/go/4eu7w6KPkT
另一个选项 - 在 xs 上垂直堆叠的全宽输入:
<div class="row">
<div class="col-md-12">
<form class="row">
<div class="col-12 col-sm pr-sm-0">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
</div>
<div class="col-12 col-sm-auto pl-sm-0">
<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>
</form>
</div>
</div>
Demo
【讨论】:
【参考方案2】:您有三种可能的方式来实现以下两个布局选项:
See my Codeply.com demonstrating all solutions detailed below...
带有粘性按钮的全角搜索表单
只需将flex-fill
类添加到您的<div class="form-group">
。
请注意,从上面的原始示例代码中,Bootstrap 4 已从使用 input-group-btn
更改为 input-group-append
以使按钮坚持关键字字段并正确处理圆角。 p>
最后,我还添加了一个aria-label
属性以满足您示例的可访问性要求。
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
<div class="input-group flex-fill">
<input type="search" name="search" id="search" value="" placeholder="Full-width search form with sticky button" class="form-control" aria-label="Search this site">
<div class="input-group-append">
<input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
</div>
</div>
</form>
</div>
</div>
</div>
带有独立按钮的全角搜索表单,没有包装div
对于此解决方案,您有两种选择,具体取决于您所需的 HTML 结构和项目的需要。
首先,您可以删除所有包装 div 并将类 flex-fill mr-2
添加到 <input class="form-control">
。这是最简单的选择。
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
<input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/o wrapper div" class="flex-fill mr-2 form-control" aria-label="Search this site">
<input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
</form>
</div>
</div>
</div>
如果你有机会,我会选择这个解决方案,因为它可以生成最干净的 HTML ;)
带有分隔按钮的全角搜索表单和包装div
如果您的表单需要一些包装器 div(例如,由于与您的 CMS 作斗争),那么您必须与放置类的位置进行斗争:首先,将 <div class="input-group">
替换为 <div class="flex-fill mr-2">
,添加类 w-100
到<input class="form-control">
,最后删除 <div class="input-group-append">
包装器并将提交按钮移到 flex-fill 包装器之外。
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
<div class="flex-fill mr-2">
<input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/ wrapper div" class="form-control w-100" aria-label="Search this site">
</div>
<input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
</form>
</div>
</div>
</div>
移动
最终,您的选择可能归结为您希望它如何在移动设备上运行。当然,您可以更进一步地处理代码,但值得查看以下断点:
【讨论】:
【参考方案3】:Bootstrap 4.3 现在有一个表单网格,它允许您指定列宽。这就是我最终将输入表单和按钮排列成我想要的任何宽度的方式。
https://getbootstrap.com/docs/4.3/components/forms/#form-grid
<form class="form" method="get" action="/products">
<div class="row">
<div class="col-md-6 offset-md-2">
<input type="text" class="form-control" name="search" placeholder="search products">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-outline-primary mb-2">Search</button>
</div>
</div>
</form>
<br>
【讨论】:
具有 2 行和内联表单的 Bootstrap 4 导航栏
】具有2行和内联表单的Bootstrap4导航栏【英文标题】:Bootstrap4navbarwith2rowsandinlineform【发布时间】:2018-08-2220:08:45【问题描述】:好的,所以有很多这样的问题,但是在尝试了其他类似问题的一些答案中的代码之后,我仍然卡住... 查看详情
如何更改引导内联日期选择器以适应全宽
...引导内联日期选择器以适应全宽【英文标题】:Howtochangebootstrapinlinedatepickertofitfullwidth【发布时间】:2015-04-2201:29:17【问题描述】:我从这里使用引导日期选择器:https://github.com/eternicode/bootstrap-datepicker现在我想将它的宽度与父... 查看详情
吴裕雄bootstrap前端框架开发——bootstrap表单:内联表单(代码片段)
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-内联表单</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情
在移动设备上将 Bootstrap 布局从内联表单更改为网格
】在移动设备上将Bootstrap布局从内联表单更改为网格【英文标题】:ChangeBootstraplayoutfrominlineformtogridonmobiledevice【发布时间】:2016-08-2122:02:39【问题描述】:我有一个复杂的Web表单,其中一行包含许多字段。Bootstrap内联表单在大... 查看详情
如何在导航栏中制作 Bootstrap 4 全宽下拉菜单?
】如何在导航栏中制作Bootstrap4全宽下拉菜单?【英文标题】:HowtomakeaBootstrap4fullwidthdropdowninNavbar?【发布时间】:2018-09-1412:07:43【问题描述】:我正在尝试制作一个看起来像折叠项的全角下拉菜单-网站现在经常使用的全角可折叠... 查看详情
Twitter Bootstrap 内联表单间距
】TwitterBootstrap内联表单间距【英文标题】:TwitterBootstrapinlineformspacing【发布时间】:2013-11-2613:53:04【问题描述】:HereisaJSFiddleshowingmycodeinaction.我想使用TwitterBootstrap3考虑响应性,以最正确的方式在表单的不同部分之间添加几个... 查看详情
Bootstrap 4:如何在容器中拥有一个包含内容的全宽导航栏(如 SO Navbar)?
】Bootstrap4:如何在容器中拥有一个包含内容的全宽导航栏(如SONavbar)?【英文标题】:Bootstrap4:Howtohaveafullwidthnavbarwiththecontentinacontainer(LiketheSONavbar)?【发布时间】:2017-05-2803:03:57【问题描述】:我正在使用Bootstrap4。如何制作类... 查看详情
bootstrap-内联表单水平(横向)表单响应式图片辅助类[转]
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><!--媒体查询--><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewp 查看详情
Bootstrap 4 Flexbox - 将多列与对齐项目中心对齐
】Bootstrap4Flexbox-将多列与对齐项目中心对齐【英文标题】:Bootstrap4Flexbox-Alignmultiplecolumnswithalignitemscenter【发布时间】:2020-09-1713:11:05【问题描述】:我有3列试图垂直居中于视口。列必须是全宽-没有内联。我希望它们像在代码层... 查看详情
Bootstrap 3 的全宽和盒装宽度
】Bootstrap3的全宽和盒装宽度【英文标题】:FullandboxedwidthwithBootstrap3【发布时间】:2014-12-2403:47:25【问题描述】:我要建立一个有两种布局的网站:Bootstrap3的盒装和全宽。作为引导文档,我可以使用.container-fluid创建全宽布局,... 查看详情
如何使 Bootstrap 按钮全宽?
】如何使Bootstrap按钮全宽?【英文标题】:HowtoamakeaBootstrapbuttonfullwidth?【发布时间】:2015-09-0421:07:34【问题描述】:这就是我现在所拥有的。我不能让它变成全宽Almostfullwidth这是html。我已经尝试添加.btn-block类,但我得到的结果... 查看详情
bootstrap表单里面label长度差距很大,怎么垂直对其
参考技术A本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容:1.基本案例2.内联表单3.水平排列的表单4.被支持的控件5.静态控件6.控件状... 查看详情
bootstrap入门表单
Bootstrap入门(五)表单 先引入本地的CSS文件 <linkhref="css/bootstrap.min.css"rel="stylesheet">一.内联表单单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input&g 查看详情
Bootstrap:容器中带有列的全宽网格
】Bootstrap:容器中带有列的全宽网格【英文标题】:Bootstrap:Fullwidthgridwithcolumnsincontainer【发布时间】:2017-01-2423:54:17【问题描述】:我想创建一个全宽布局,左侧为蓝色半边,右侧为红色半边。之后我想在布局内但在容器内添加... 查看详情
Twitter Bootstrap - 全宽导航栏
】TwitterBootstrap-全宽导航栏【英文标题】:TwitterBootstrap-fullwidthnavbar【发布时间】:2012-10-1615:53:34【问题描述】:按照TB的例子,我有一个导航栏,标记如下:<divclass="container"><divclass="navbar"><divclass="navbar-inner"><!--na... 查看详情
一行内联表单,输入字段上方有标签
...间】:2015-03-1501:55:11【问题描述】:我正在使用angularjs和bootstrap3作为css构建一个Web应用程序(我对css的了解非常有限)。我想创建一个内联表单,其中包含5个输入字段和要放置在它们之上的标签。第一个字段需要比其他字段占... 查看详情
Django Crispy Forms 重新排列布局并保留 Bootstrap 内联格式?
】DjangoCrispyForms重新排列布局并保留Bootstrap内联格式?【英文标题】:DjangoCrispyFormsrearrangelayoutandretainBootstrapinlineformatting?【发布时间】:2014-02-2607:48:19【问题描述】:我目前正在处理一个Django项目,并且正在使用cripsy-forms与Bootst... 查看详情
列是 IE 8 中的全宽 - Css bootstrap
】列是IE8中的全宽-Cssbootstrap【英文标题】:columnarefullwidthinIE8-Cssbootstrap【发布时间】:2014-01-1503:10:39【问题描述】:我在我的网页中使用bootstrap3.0.3并添加html5shiv库并响应库来修复它,但它不适用于InternetExplorer8。我的html代码:... 查看详情