使Bootstrap输入在移动设备上垂直对齐，在桌面上水平对齐
要实现在移动设备上垂直对齐Bootstrap输入，而在桌面上水平对齐，可以使用以下方法：
- 使用Bootstrap的栅格系统：Bootstrap提供了响应式的栅格系统，可以根据设备的屏幕大小自动调整布局。可以将输入框包裹在一个带有垂直对齐样式的列中，并使用水平对齐样式的列来包裹其他元素。例如：
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="input1">输入框1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input2">输入框2</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="input3">输入框3</label>
<input type="text" class="form-control" id="input3">
</div>
<div class="form-group">
<label for="input4">输入框4</label>
<input type="text" class="form-control" id="input4">
</div>
</div>
</div>
</div>在上述代码中，使用了col-md-6类来将输入框分为两列，其中每列包含两个输入框。这样，在桌面上，输入框将水平对齐；在移动设备上，输入框将垂直对齐。
- 使用自定义CSS样式：如果需要更精确地控制输入框的对齐方式，可以使用自定义的CSS样式。可以为移动设备和桌面设备分别定义不同的样式，并使用媒体查询来根据设备的屏幕大小应用相应的样式。例如：
<style>
@media (max-width: 767px) {
.vertical-align-input {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
@media (min-width: 768px) {
.horizontal-align-input {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>
<div class="container">
<div class="vertical-align-input">
<div class="form-group">
<label for="input1">输入框1</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input2">输入框2</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
<div class="horizontal-align-input">
<div class="form-group">
<label for="input3">输入框3</label>
<input type="text" class="form-control" id="input3">
</div>
<div class="form-group">
<label for="input4">输入框4</label>
<input type="text" class="form-control" id="input4">
</div>
</div>
</div>在上述代码中，使用了媒体查询来定义在不同屏幕大小下应用的样式。在移动设备上，输入框将垂直对齐，使用了.vertical-align-input类；在桌面上，输入框将水平对齐，使用了.horizontal-align-input类。
以上是实现在移动设备上垂直对齐Bootstrap输入，在桌面上水平对齐的方法。希望对你有所帮助！
相关·内容
2回答
自动对齐引导内联窗体中的复选框
css、twitter-bootstrap
我有
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
浏览 4提问于2013-12-03得票数 1
1回答
引导输入组网格对齐不适用于Chrome
twitter-bootstrap
我使用的引导带3，并试图使用一个输入组与一个非分组的输入在同一形式的网格。它在IE和FF上工作得很好，但是在Chrome中，网格对齐已经丢失了。是Chrome bug还是我做错了什么？
<form>
<div class="form-group"><div class="col-xs-4">
<label class="control-label" for="input1">Input1</label>
<input type="tex
浏览 0提问于2017-03-27得票数 0
回答已采纳
2回答
引导响应式内联表单
html、twitter-bootstrap
我有一个Bootstrap内联表单，是6个输入然后一个按钮。如果所有内容都能显示在屏幕上，看起来还不错，但当您将屏幕变小时，输入会一次折叠到下面一个。我尝试过将每个输入都包装在一个col-md-2中，但这会使表单看起来很奇怪。我不确定我是不是做错了什么。
有没有什么方法可以把输入组合在一起，让它们折叠起来，比如6x1，3x2，2x3，1x6？
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
浏览 0提问于2017-01-18得票数 4
回答已采纳
2回答
使用bootstrap设置表单组中输入/文本区域的宽度
textarea、width、bootstrap-modal、forms、textinput
我在bootstrap模式窗口中创建了一个表单。在表单内部，我使用了输入类型text和textarea。
<div class="modal fade" id="TestModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
&
浏览 11提问于2017-06-26得票数 0
回答已采纳
1回答
下拉列表未显示，引导程序和谷歌应用程序脚本，下拉列表从电子表格中填充
google-apps-script、dropdown、spreadsheet、bootstrap-5
我已经努力工作了好几个小时，似乎一切都井井有条，但我无法使它运转起来。
希望有人能给我指明正确的方向，你觉得这段代码有什么问题吗？
相关部分是第一个文件的最后一个函数。
对于第二个文件，所有这些都是在表单组件之后
我很绝望：
这是我正在使用的代码
code.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile("Webappboot"); //Name of the H
浏览 3提问于2021-06-11得票数 1
回答已采纳
2回答
拉伸元素以适合容器
html、css、twitter-bootstrap
我正在使用这个外观编写表单布局(使用Bootstrap，但我认为这与我的问题无关)：
+-----------------container------------------+
| |
| label1 [ input ] label2 [ input ] |
| label3 [ input ] label4 [ input ] |
| label5 [ input ] label6 [ input ] |
|
浏览 4提问于2013-02-06得票数 0
回答已采纳
2回答
如何在joomla 3中创建联系人表单
joomla3.0
我正在尝试在Joomla 3中创建自定义联系人表单，原因是我没有找到这么大的联系人表单。有人能告诉我怎么做吗？html：
<div class="col-lg-12">
<form role="form" method="POST" style="margin-top: 2.7em;" action="">
<div class="row">
<div class="form-group col-lg-4">
<label for
浏览 1提问于2014-09-18得票数 1
2回答
如何使用JavaScript函数操作动态表单中的表单输入值
javascript、html
我有一个包含动态添加行的表，这些行具有不同的动态使用、提交等属性。我有一个输入框，它具有自动完成功能，必须更改其余的输入框的值。如果没有固定的name、id或class，如何更改它们的值
动态创建的行：
<tr>
<div id="1">
<div id="2">
<input type="text" name="input1" id="input1" class="input1" />
</div>
浏览 0提问于2012-10-11得票数 0
回答已采纳
1回答
Bootstrap3，Popover，PHP - Contact Form Inside breaks，以及Popover with content
php、twitter-bootstrap、twitter-bootstrap-3、popover、contact-form
<a class="btn btn-primary" id="popover">xxx</a></li>
<div id="popover-head" class="hide"><h3 class="popover-title" style="color:#333;">xxx</h3></div>
浏览 0提问于2014-01-24得票数 1
1回答
当我清空一个文本框时，Angularjs启用和禁用所有文本框
javascript、angularjs、forms、input、disabled-input
我是初学者在网络开发，我想了解更多关于我可以做我的输入和选择控制。我有一个选择和四个输入。
我想要禁用所有其他输入和select if I select a option or I enter a text in my input
很抱歉我的英语，你能帮我做AngularJS的部分吗?我想用AngularJS做这件事，这很重要。
当选择的其他输入被禁用时，我需要显示一条消息来解释为什么不能使用其他输入或选择
我不知道如何做，但我认为我需要使用ng-model，ng-disabled，ng-change，也许ng-blur和ng-focus
<form>
<div cl
浏览 6提问于2018-01-12得票数 0
1回答
如何使用knockoutjs绑定嵌套输入
javascript、jquery、knockout.js
我有一个想要将每个单选按钮的所有嵌套输入字段绑定到它的选项的位置，这样我就可以在单击它时显示结果。例如，如果选择option1，所显示的唯一结果将是option1的嵌套输入。我如何使用knockout.js和jQuery来实现它呢？
<div id="results" class="jumbotron">
<!-- ko if : option1 -->
<ul data-bind="text: input1"></ul>
...
<!-- /ko -->
<
浏览 3提问于2015-02-24得票数 0
回答已采纳
5回答
如何合并输入框的值
javascript、jquery、html
我有5个输入框，每个输入框有不同的值。如何合并输入框的值并对其进行比较，然后发出警告或做一些事情。
示例：
<form>
<input id="input1" type="text">
<input id ="input2" type = "text"/>
<input id ="input3" type = "text"/>
<input id =
浏览 6提问于2014-02-10得票数 1
回答已采纳
1回答
jquery选项卡键按下文本输入，跳过以下输入，然后转到next
jquery、input
我有一些文字输入。如果我从#input1 1中选择选项卡，我想跳过#input1 2，然后转到next。
<div class="form-group required">
<label for="input1" class="control-label col-sm-4">Input 1</label>
<div class="col-sm-5">
<input type="text" name="input1"
浏览 1提问于2018-01-31得票数 0
4回答
如何在Bootstrap 3中垂直对齐长标签
html、css、twitter-bootstrap、twitter-bootstrap-3
我的输入旁边有一个很长的标签，它没有垂直对齐。
有没有什么办法可以解决这个问题呢，？
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Labdas kjas kljas dlkjasd lksjd el1</label>
<div class=&
浏览 0提问于2014-03-06得票数 5
1回答
Jquery更改输入焦点上的Fieldset背景色
javascript、jquery、input、focus、fieldset
下面的代码显示了当input聚焦时，它的父fieldset背景色会发生变化。我希望字段集能够保持背景色，直到另一个字段集中输入为止。下面的概念是可行的，除非一个字段集包含多个输入，当下一个输入聚焦时，更改将被重新触发。有什么想法吗？谢谢!
jQuery
jQuery("input[title]").focus(function() {
jQuery(this).closest('fieldset').animate({backgroundColor: "#7e7451", color: "#ffffff"}, 's
浏览 2提问于2014-04-02得票数 1
回答已采纳
1回答
如何使两个表单组div垂直对齐？
css、twitter-bootstrap
如何使这两个div垂直对齐？无论我做什么样的选择，两个输入组都不会在垂直线上对齐。
下面是我的代码片段：
<div class="widget-body">
<form class="form-horizontal" id="form">
<input class="form-control" type="hidden" id="id">
<fieldset>
<div clas
浏览 4提问于2016-09-18得票数 1
回答已采纳
1回答
需要会话存储帮助
javascript、session-storage
我试图存储一个javascript变量，这样它就可以使用会话存储在html页面上进行更新和携带。
在htmlpage1中，用户可以更改更新js变量total1的input1和input2。在函数CalcTotal1()中，我尝试使用sessionStorage.setItem("newtotal1"，total1)存储total1，以便将其传递到htmlpage2。
加载htmlpage2时，RunningTotalCalc2()将运行。在这个函数中，我尝试使用sessionStorage.getItem("newtotal1")调用变量total1，以便可以在
浏览 5提问于2016-05-19得票数 0
回答已采纳
2回答
关闭框时，jQuery UI对话框窗体的答案仍然存在
jquery-ui
我想使用jQuery UI对话框来处理表单的一部分。
我希望代码能像这样工作。
<form id="MyForm" name="MyForm">
<input type="text" id="Input1" name="Input1">
<input type="text" id="Input2" name="Input2">
<div id="dialog">
<input type="
浏览 3提问于2010-01-14得票数 2
2回答
带引导的响应形式
css、twitter-bootstrap
我想在桌面上创建一个具有以下布局的表单：
Label1 Label2 Label3
input1 input2 input3
Label4 Label5 Label6
input4 input5 input6
在移动设备上，我希望它使用以下布局呈现：
Label1
input1
Label2
input2
...
我用的是引导，但没有成功。我的小提琴：
浏览 7提问于2017-01-04得票数 0
2回答
在Bootstrap 4中的3个标签/输入旁边放置一个5行选项列表
twitter-bootstrap、bootstrap-4
我的窗体上有一个相当大的select控件，我想利用它旁边的空间：
我不想使用表格，因为这会在移动设备上造成错误的影响。我需要的是：
下面是我的代码：
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="input1">label1</label>
<div class="col-sm-4">
<input type="text" cl
浏览 0提问于2018-03-15得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
