Bootstrap 4:将输入水平放置
Bootstrap 4是一种流行的前端开发框架，它提供了一套用于构建响应式和移动优先的网页界面的工具和样式。在Bootstrap 4中，可以使用一些类来将输入水平放置。
将输入水平放置可以提供更好的用户体验，特别是在大屏幕上。以下是一种常见的方法来实现水平放置的输入框：
- 使用
form-inline类：通过在<form>标签上添加form-inline类，可以将表单元素水平排列。例如：
<form class="form-inline">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="Name">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email" placeholder="Email">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>在上面的示例中，form-inline类被应用于<form>标签，使得输入框和按钮水平排列。mb-2和mr-sm-2类用于添加一些间距和对齐方式。
- 使用
input-group类：通过在<div>标签中包裹输入框和按钮，并添加input-group类，可以将它们水平放置。例如：
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>在上面的示例中，input-group类被应用于包裹输入框和按钮的<div>标签，使得它们水平排列。mb-3类用于添加一些间距。
这些方法可以适用于各种输入元素，如文本框、下拉菜单、复选框等。
腾讯云提供了一些与前端开发相关的产品，例如：
- 云开发（CloudBase）：提供了一站式的后端云服务，包括云函数、数据库、存储等，可用于支持前端应用的后端开发需求。
- CDN加速：提供全球加速服务，可用于加速前端静态资源的分发，提升网页加载速度。
- 云存储（COS）：提供了可靠、安全、低成本的对象存储服务，可用于存储前端应用的静态资源、用户上传的文件等。
以上是关于Bootstrap 4中将输入水平放置的解释和相关腾讯云产品的介绍。希望对您有帮助！
相关·内容
0回答
Bootstrap 4:将输入水平放置
html、css、bootstrap-4
我是Bootstrap 4的新手，需要一些帮助。我希望我的前两个输入框在同一条线上(水平)，而不是它们之间。
浏览 7提问于2018-07-23得票数 0
1回答
水平形式
ruby-on-rails、twitter-bootstrap
我正在尝试用bootstrap学习rails。所以，我写了这样的rails。但是，我希望将这些输入表单水平放置在我的浏览器上。我不想使用f.input_field。
输入比input_field有用，不是吗？
浏览 1提问于2013-10-08得票数 0
2回答
datatable js DOM元素定位问题
javascript、twitter-bootstrap、datatable、datatables
例：
谁能告诉我我犯了什么错误。
浏览 3提问于2019-03-05得票数 0
0回答
无法将div加宽以包含所有浮动元素
css、html、twitter-bootstrap
我已经将bootstrap date模块转换为仅使用Angular(仍在转换过程中)。
单击"Your Date Range Picker“下的输入字段以查看日期范围选择器。出于某种原因，它们最终会被包裹在一起，这样它们就会垂直堆叠，而我不明白为什么它们不能水平并排。我尝试过使用clears，设置overflow:隐藏到包装器中，但似乎什么都不起作用。我花了4+几个小时在chrome调试器上玩弄css规则，却不能让包装器变宽到需要水平放置所有三个子元素的程度。
浏览 3提问于2016-12-30得票数 0
回答已采纳
1回答
如何将图像水平放置在文本框旁边？
twitter-bootstrap
我试图在下面的屏幕截图中复制这个布局，方法是将图像水平放置在文本框旁边。数字3和4是图像，6和5是文本。 <div class="jumbotron"> <p>Bootstrap is
浏览 3提问于2017-03-25得票数 0
回答已采纳
2回答
如何在Bootstrap中将图像居中？
css、html、twitter-bootstrap、carousel、bootstrap-4
我试图在Bootstrap 4 Alpha 6的旋转木马中水平居中放置图像。
在我尝试过的任何方法中，它似乎都不起作用，包括使用center-block。
浏览 16提问于2017-03-12得票数 4
回答已采纳
1回答
Bootstrap 4水平滚动
php、html、css
我无法对此进行排序： 我希望我的发票"Factuur“荷兰语总是800px，但在移动视图中它将行缩小到彼此中，我希望我的发票是静态的和”可滚动的“。下面是我的代码(CSS)： .invoice-box { min-width: 800px; overflow-y: auto; border: 1px solid #eee; fo
浏览 21提问于2020-09-29得票数 1
回答已采纳
1回答
React引导程序布局问题
javascript、reactjs、bootstrap-4、react-bootstrap
我正在考虑React-bootstrap的布局。尝试了使用容器、行和列的基本布局。您可以访问沙箱here。 我从react-bootstrap文档中了解到的是，列应该水平放置，而不是堆叠在一起。我试图实现的是让这些列按水平方向堆叠。
浏览 15提问于2021-08-22得票数 0
回答已采纳
2回答
Bootstrap 4如何将标签和输入字段放在水平位置
html、angular、bootstrap-4
我正在Bootstrap 4中设计一个表单，我需要满足以下几个要求：
1)屏幕应分为两部分。(ID和年龄是一部分，姓名和学院是一部分。)2)标签和输入域在大屏幕时应为水平，当屏幕变为中屏时应为垂直。(现在我只能让它在中等屏幕上保持垂直，但不能让它在大屏幕上变成水平。)(我用的是class="row"，但它确实起作用了。)
浏览 8提问于2020-03-10得票数 1
回答已采纳
2回答
无法将提交按钮放入bootstrap 4.3.1的输入中
html、css、bootstrap-4
我工作的bootstrap 4.3.1，我试图把提交按钮内输入，并尝试下面的方法和更多的表单堆栈溢出。 因为我的输入是rounded-pill，所以我需要把按钮放在输入字段中。如何将按钮放置在输入字段内 @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi
浏览 5提问于2019-04-30得票数 2
回答已采纳
4回答
将bootstrap下拉菜单更改为水平向右放置
html、css、twitter-bootstrap、drop-down-menu
图像将在下拉列表的右侧打开，而不是在其下方)
我当前的代码是： <div class="btn-group"> </div> </u
浏览 2提问于2013-05-07得票数 6
回答已采纳
1回答
自举4卡集团
twitter-bootstrap
我一直在使用Bootstrap 4中的新卡组组件，但有以下问题： <div class="card"> <h5 class="card-title">4<div>
浏览 3提问于2016-01-25得票数 0
回答已采纳
1回答
如何使引导带4使用屏幕的整个宽度？
bootstrap-4
我使用的引导带4与这个视口：对于我的显示器来说，一切都是很好的预期，它允许水平的1920 my。我放置了一个带有边框的section元素，这样我就可以看到它水平扩展的程度。它基本上限制在1100 It左右。增加一些px作为保证金，填充等.这个限制不是在1100便士，而是在那个社区。Bootstrap 4</e
浏览 3提问于2019-03-04得票数 2
回答已采纳
1回答
Bootstrap4:将卡片并排放置？
bootstrap-4
所以我使用了bootstrap4。我试着把一张卡片放在另外两张堆叠在一起的卡片的左边，最左边的一张卡片的长度是另外两张cards....But的总长度，我不知道怎么做。
浏览 0提问于2018-05-24得票数 4
回答已采纳
2回答
用2x1多米诺填充3xN瓷砖的方法数目(SPOJ: M3TILE)
c++、algorithm、math、permutation
其任务是以多少方式计算一个3*n (n >= 0，n是唯一的输入)矩形是完全由2*1多米诺填充的。例如(红线代表多米诺骨牌)：这就是我第一次在一张纸上画的东西，当我读到文本的时候，我看到一个3*2的矩形可以有三个可能的组合，如果n是奇数，那么解是0，因为没有办法填充整个矩形(一片将始终被多米诺骨牌遮住main() int arr[31];
arr[1]=0; arr[3]=0;
for(int i = 4;i < 31;
浏览 3提问于2013-05-05得票数 7
1回答
什么是新的引导4控制标签类？
bootstrap-4
Visual 2013，asp.net web应用程序.Net 4.5
将.control-label重命名为..form control-label。但是我在任何bs 4 css文件中都找不到这样的类。那么替代者是什么呢？
浏览 0提问于2018-01-28得票数 8
回答已采纳
1回答
引导4，SearchBar绝对中心并使其响应性
html、css、bootstrap-4
如何在引导4中在屏幕中间(水平和垂直地在页脚和导航之间)对搜索栏进行居中，并使其响应移动设备。// Initialize tooltip component $('[data-toggle4 Template</title>
<link rel="s
浏览 0提问于2018-03-20得票数 1
回答已采纳
1回答
MDCChipField快速滚动方向
ios、material-design、material-components、mdc-components、material-components-ios
我正在实现“输入芯片”类型，并且能够将输入的文本作为一个芯片添加到mdcSearchField.addChip(chipView如何将可滚动方向设置为水平而不是垂直方向？
谢谢。
浏览 0提问于2019-07-08得票数 2
3回答
块体的垂直和水平对中
html、twitter-bootstrap、css、bootstrap-4、twitter-bootstrap-4
我正试图像下面的图片一样，将红色块水平地和垂直地放在中间，但不幸的是，红色块被放置在错误的位置。我使用引导4.С，有人说出什么问题了吗？？transform: translate(-50%, -50%);<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bo
浏览 0提问于2017-02-21得票数 0
3回答
尝试在水平而不是垂直的情况下嵌入带有标题的图像
html、css
margin: auto; text-align: left; border: 0;<h1>HOW IT WORKS</h1>
<div class="col-xs-4"</p>
</div&
浏览 3提问于2016-03-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
