Bootstrap：将输入与按钮对齐
问题描述 投票：0回答：12
为什么按钮和输入在 Bootstrap 中不能很好地对齐？
我尝试了一些简单的方法，例如：
<input type="text"/><button class="btn">button</button>
该按钮比 chrome/firefox 中的输入低约
5px
12个回答
607
投票
投票
Twitter Bootstrap 5
在 Twitter Bootstrap 5 中，可以使用
input-group左侧的分组按钮
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
右侧的分组按钮
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
Twitter Bootstrap 4
在 Twitter Bootstrap 4 中，可以使用
input-group-prependinput-group-append左侧的分组按钮（前置）
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control">
</div>
右侧的分组按钮（追加）
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
Twitter Bootstrap 3
如 @abimelex 的答案所示，可以使用
.input-group左侧的分组按钮
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
右侧的分组按钮
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
添加此解决方案是为了使我的答案保持最新，但请对 @abimelex 提供的答案投赞成票。
Twitter 引导程序 2
Bootstrap 提供了一个
.input-append<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
正如 @OleksiyKhilkevich 在他的回答中指出的，还有第二种方法可以通过使用
inputbutton.form-horizontal<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
差异
这两个类之间的区别在于
.input-appendbuttoninput.form-horizontal--注意--
为了允许
inputbuttonfont-size0.input-appendinline-blockinputem%221
投票
投票
引导5
<div class="input-group">
<input type="text" class="form-control">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
引导程序 3 和 4
您可以使用 input-group 按钮属性将按钮直接应用于输入字段。
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
38
投票
投票
请注意，似乎有一个特殊的 CSS 类，称为
form-horizontalinput-append 还有另一个副作用，它将字体大小降至零
35
投票
投票
使用 .form-inline = 这将使标签和内联块控件左对齐，以实现紧凑的布局
示例：http://jsfiddle.net/hSuy4/292/
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = 右对齐标签并将其向左浮动，使它们与控件显示在同一行，这更适合 2 列表单布局。
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
17
投票
投票
我首先尝试了，但最终做了一些我想分享的改变。这是适合我的代码（找到所附的屏幕截图）：
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
如果您想看到它工作，只需在编辑器中使用以下代码：
<html>
<head>
<link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
</head>
<body>
<div class="container body-content">
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</body>
</html>
希望这有帮助。
6
投票
投票
我也在同样的问题上苦苦挣扎。我使用的引导类不适合我。我想出了一个解决方法，如下所示：
<form action='...' method='POST' class='form-group'>
<div class="form-horizontal">
<input type="text" name="..."
class="form-control"
placeholder="Search People..."
style="width:280px;max-width:280px;display:inline-block"/>
<button type="submit"
class="btn btn-primary"
style="margin-left:-8px;margin-top:-2px;min-height:36px;">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
基本上，我覆盖了“form-control”类的显示属性，并使用其他样式属性来纠正大小和位置。
结果如下：
6
投票
投票
引导4：
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-success" type="button">Button</button>
</div>
</div>
4
投票
投票
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
3
投票
投票
我尝试了上述所有代码，但都没有解决我的问题。这对我有用。我使用了输入组插件。
<div class = "input-group">
<span class = "input-group-addon">Go</span>
<input type = "text" class = "form-control" placeholder="you are the man!">
</div>
1
投票
投票
不直接相关，除非你有类似的代码，但我刚刚注意到 form-inline、bootstrap 3.3.7 有一个奇怪的行为
我没有为此使用行和单元格，因为它是一个桌面项目，如果开始标签位于表格下方（在本例中）：
<table class="form-inline">
<form>
<tr>
表单元素会堆叠。
开关并正确排列。
<form>
<table class="form-inline">
<tr>
Safari 10.0.2 和最新的 Chrome 没有任何区别。也许我的布局是错误的，但它不是很宽容。
1
投票
投票
取左侧的输入浮点数。然后拿起按钮并将其向右浮动。 当您超过一门课程时，您可以清除课程。
<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name">
<div style="width:8%;float:left"> </div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>
-1
投票
投票
style="padding-top: 8px"
使用它可以在行中向上或向下移动 div。 对我来说有奇迹。
最新问题
- 执行存储过程最小API .Net
- 如何实现一个函数来调用任何模板化 lambda 函数？
- SMAC3 conda 依赖项
- 为什么我们实际上一直在使用List<T>，而C#中仍然存在数组？ [已关闭]
- 允许父级滚动子元素的整个宽度/高度，即使子缩放通过矩阵进行变换
- image_dataset_from_directory 返回列表而不是数据集对象
- 如何在Wordpress中集成第3方API
- 输入类型颜色默认颜色输入为HEX
- NgIf 和零：为什么模板没有被渲染？
- 使用全球化和本地化在 ASP.Net 中创建多语言网站
- MERN Stack 用户创建帖子 Mongoose MongoError：11000
- 如何为 Steam 和 Epic Games 创建单独的安装路径（通过单选按钮选择）或用于自定义安装的路径框？
- 如何使用 aws cli 对特定标签执行分层查询并以平面结构输出结果？
- 为什么在“空中”创建的锚点在 ARCore 中不是静态的
- aws-cli - 使用 --query 和 --filter 过滤输出
- 在 TypeScript 上生成默认映射
- Google 日历 api 获取错误，如“domain”：“global”、“reason”：“notFound”、“message”：“Not Found”
- java.sql.SQLException：列索引超出范围，2 > 1
- Twilio - 通过 API 连接两个活动呼叫，无需使用会议或排队
- 使用自动装配参数调用方法
© www.soinside.com 2019 - 2024. All rights reserved.