关键词：
【中文标题】在移动设备上将 Bootstrap 布局从内联表单更改为网格【英文标题】：Change Bootstrap layout from inline form to grid on mobile device 【发布时间】：2016-08-21 22:02:39 【问题描述】：我有一个复杂的 Web 表单，其中一行包含许多字段。 Bootstrap 内联表单在大屏幕上效果很好。但是，要求是使页面具有响应性，以便内联表单在平板电脑和手机等较小的屏幕上转换为 3 列网格布局。
大屏内联表单：
手机屏幕上的必需布局
有可能吗？这是针对 Bootstrap 3 的。
非常感谢任何提示！
代码片段：
<div class="container">
<form class="form-horizontal" data-toggle="validator" role="form" action="" method="post" id="form1">
<fieldset style="background-color:#F7F7F7">
<div class="row">
<div class="form-inline" style="text-align:left">
<div class="form-group" style="margin-right:30px;">
<div class="floating-label-form-group" style="top:-5px;width:180px">
<label class="control-label" for="Selection1">Selection1</label>
<select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
<option value="" disabled selected>Selection1 *</option>
<option value="1">option 1</option>
<option value="2">option 2/option>
<option value="3">option 3</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
<div class="form-group ">
<div class="floating-label-form-group">
<label class="control-label" for="fName">1st Name</label>
<input id="fName" name="fName" type="text" required>
</div>
<span class="help-block with-errors"></span>
</div>
<div class="form-group " style="margin-right:30px">
<div class="floating-label-form-group">
<label class="control-label" for="lName">Last Name</label>
<input id="lName" name="lName" type="text" required>
</div>
<span class="help-block with-errors"></span>
</div>
<div class="form-group">
<div class="floating-label-form-group" style="top:-5px;width:120px">
<label class="control-label" for="gender">Gender</label>
<select id="gender" name="gender" class="form-control selectpicker" required>
<option value="" disabled selected>gender *</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
<div class="form-group">
<div class="floating-label-form-group" style="top:-5px;width:160px">
<label class="control-label" for="selection2">Selection2</label>
<select id="selection2" name="selection2" class="form-control selectpicker" required>
<option value="" disabled selected>Selection2 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
</div>
</div><!-- /row -->
</fieldset>
</form>
【问题讨论】：
我什么都试过了。 SO一直是最后的手段。我不是要求有人为我编码，为了记录。我相信其他一些人可能面临类似的情况。如果@Paulie_D 无法提供有关如何解决问题的任何提示，请不要回来投反对票。 只尝试显示顶部屏幕截图的内联表单布局，因此我故意模糊了文本。如果有人发现它令人困惑，我深表歉意。应该使用whiteout。是否必须给出代码 sn-p 才能理解问题？ 相同的结果...我们不知道什么元素是什么，以及它们应该如何定位在之前/之后。这就是为什么我们要求您使用代码进行演示...这样我们就可以看到您进行更改时发生的情况。 添加了代码片段。谢谢你。屏幕截图将被编辑以反映代码。 你能分享你的 CSS 吗？您正在使用一些自定义类。 【参考方案1】：试试这个。使用 col-md-push-* 和 col-md-pull-*
更新 JSFIDDLE
这里在form-group类和样式之前使用了form-inline类
.form-inline .form-control
width: 100%;
.nopadding
padding: 0px 2px 0px 0px !important;
margin: 0px !important;
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="form-inline">
<div class="form-group">
<div class="row">
<div class="col-md-4 col-md-push-8">
<div class="col-xs-6 nopadding">
<label class="control-label" for="lName">Gender</label>
<select id="gender" name="gender" class="form-control selectpicker" required>
<option value="" disabled selected>gender *</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
<div class="col-xs-6 nopadding">
<label class="control-label" for="selection2">Selection2</label>
<select id="selection2" name="selection2" class="form-control selectpicker" required>
<option value="" disabled selected>Selection2 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</div></div>
<div class="col-md-4">
<div class="col-xs-6 nopadding">
<div class="floating-label-form-group">
<label class="control-label" for="fName">1st Name</label>
<input class="form-control" id="fName" name="fName" type="text" required>
</div>
</div>
<div class="col-xs-6 nopadding">
<label class="control-label" for="lName">Last Name</label>
<input class="form-control" id="lName" name="lName" type="text" required>
</div></div>
<div class="col-md-4 col-md-pull-8">
<div class="col-xs-12 nopadding">
<label class="control-label" for="Selection1">Selection1</label>
<select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
<option value="" disabled selected>Selection1 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
</div>
</div>
</div>
</div>【讨论】：
不是这样的。请在发布解决方案之前阅读问题。原始布局是 INLINE。 Chensformers，我更新了我的代码..请查看我上面的片段 在属性中使用 0 时省略单位。 0px, 0pt, 0%, 0em, 0rem 等等。所有这些都给出了相同的结果，即 0。【参考方案2】：我修改了您的一些 HTML 标记，删除了一些内联样式并添加了一些类。
这就是您要查找的内容：
.myform
margin-top: 10px;
.myform fieldset
padding: 10px 20px;
background-color: #F7F7F7;
.myform .form-group
display: block;
.myform input,
.myform select
min-width: 100%;
border-radius: 0;
.myform .double-input
margin: 0;
.myform .double-input div[class^='col-'],
.myform .double-input div[class*=' col-']
padding-left: 0;
.myform .double-input:first-child div[class^='col-'],
.myform .double-input:first-child div[class*=' col-']
padding: 0;
@media (min-width: 992px)
.control-label
text-align: left;
display: block;
.myform .double-input:first-child div[class^='col-'],
.myform .double-input:first-child div[class*=' col-']
padding-right: 3px;
@media (max-width: 992px)
.myform input,
.myform select
border-top: 0;
border-right: 0;
border-left: 0;
#fName
border-right: 1px solid #ccc;
#gender
border-right: 1px solid #ccc;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="myform" data-toggle="validator" role="form" action="" method="post" id="form1">
<fieldset>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<div class="floating-label-form-group">
<label class="control-label" for="Selection1">Selection1</label>
<select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
<option value="" disabled selected>Selection1 *</option>
<option value="1">option 1</option>
<option value="2">option 2/option>
<option value="3">option 3</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
</div>
<div class="col-md-5">
<div class="row double-input">
<div class="col-xs-6">
<div class="form-group">
<div class="floating-label-form-group">
<label class="control-label" for="fName">1st Name</label>
<input id="fName" class="form-control" name="fName" type="text" required>
</div>
<span class="help-block with-errors"></span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group ">
<div class="floating-label-form-group">
<label class="control-label" for="lName">Last Name</label>
<input id="lName" class="form-control" name="lName" type="text" required>
</div>
<span class="help-block with-errors"></span>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="row double-input">
<div class="col-xs-6">
<div class="form-group">
<div class="floating-label-form-group">
<label class="control-label" for="gender">Gender</label>
<select id="gender" name="gender" class="form-control selectpicker" required>
<option value="" disabled selected>gender *</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="floating-label-form-group">
<label class="control-label" for="selection2">Selection2</label>
<select id="selection2" name="selection2" class="form-control selectpicker" required>
<option value="" disabled selected>Selection2 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
</div>
</div>
</div>
</div>
<!-- /row -->
</fieldset>
</form>【讨论】：
【参考方案3】： <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<form class="form-horizontal" data-toggle="validator" role="form" action="" method="post" id="form1">
<fieldset style="background-color:#F7F7F7" style="width:100%;">
<div class="row">
<div class="form-inline" style="text-align:left">
<div class="form-group col-xs-12 col-sm-4 col-sm-push-8">
<div class="floating-label-form-group col-xs-6 no-pad-right">
<label class="control-label" for="gender">Gender</label>
<select id="gender" name="gender" class="form-control selectpicker" required>
<option value="" disabled selected>gender *</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
<span class="help-block with-errors">Gender helper text</span>
</div>
<div class="floating-label-form-group col-xs-6 no-pad-right">
<label class="control-label" for="selection2">Selection2</label>
<select id="selection2" name="selection2" class="form-control selectpicker" required>
<option value="" disabled selected>Selection2 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<span class="help-block with-errors">Selection2 helper text</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-3 col-sm-pull-3">
<div class="floating-label-form-group col-md-12 no-pad-right">
<label class="control-label" for="Selection1">Selection1</label>
<select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
<option value="" disabled selected>Selection1 *</option>
<option value="1">option 1</option>
<option value="2">option 2/option>
<option value="3">option 3</option>
</select>
<span class="help-block with-errors">Selection1 helper text</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-5 col-sm-pull-3">
<div class="floating-label-form-group col-xs-6 no-pad-right">
<label class="control-label" for="fName">1st Name</label>
<input id="fName" name="fName" class="form-control" type="text" required>
<span class="help-block with-errors">1st Name helper text</span>
</div>
<div class="floating-label-form-group col-xs-6 no-pad-right">
<label class="control-label" for="lName">Last Name</label>
<input id="lName" name="lName" class="form-control" type="text" required>
<span class="help-block">Last Name helper text</span>
</div>
</div>
</div>
</div><!-- /row -->
</fieldset>
</form>【讨论】：
Bootstrap/flexbox 卡：在桌面上将图像移动到左侧/右侧
】Bootstrap/flexbox卡：在桌面上将图像移动到左侧/右侧【英文标题】：Bootstrap/flexboxcard:moveimagetoleft/rightsideondesktop【发布时间】：2017-01-0615:03:29【问题描述】：我正在尝试使用启用了flexbox的Bootstrap4构建以下卡片布局。图片取自我... 查看详情
Django Crispy Forms 重新排列布局并保留 Bootstrap 内联格式？
】DjangoCrispyForms重新排列布局并保留Bootstrap内联格式？【英文标题】：DjangoCrispyFormsrearrangelayoutandretainBootstrapinlineformatting?【发布时间】：2014-02-2607:48:19【问题描述】：我目前正在处理一个Django项目，并且正在使用cripsy-forms与Bootst... 查看详情
CSS在移动设备上将父宽度设置为0时，子溢出
】CSS在移动设备上将父宽度设置为0时，子溢出【英文标题】：CSSWhensettingparentwidthto0onmobile,childrenoverflow【发布时间】：2020-04-2404:50:20【问题描述】：我有一个联系人部分，它通过将父级的宽度从0%设置为30%来滑出，varcontact_toggle=t... 查看详情
避免在较小的屏幕上将第二行移至下一行 Bootstrap 3
】避免在较小的屏幕上将第二行移至下一行Bootstrap3【英文标题】：AvoidsecondrowmovingtonextlineonsmallerscreensBootstrap3【发布时间】：2016-11-1022:07:18【问题描述】：我有一个问题，我无法完全理解。我有2行，每行3张图片。我想要的是在8... 查看详情
Bootstrap 插件导致页面在移动设备上水平滚动
】Bootstrap插件导致页面在移动设备上水平滚动【英文标题】：Bootstrapaddoncausespagetoscrollhorizontallywhenonmobile【发布时间】：2020-05-0216:10:23【问题描述】：我的cshtml中有一个包含Bootstrap插件的输入组。该插件被添加到表单控件中。在... 查看详情
bootstrapvsjquerymobile对比！
...、选项卡、底部菜单、列表、表单等各种组件，而这些与Bootstrap提供的组件有很大区别，jQueryMobile提供的是类似手机APP的组件，只用于移动网页，而Bootstrap提供的是面向所有设备的组件，并没有对移动设备专门考虑，与移动APP的... 查看详情
bootstrap网格系统
1.简介Bootstrap官方文档有关网格系统的描述：“Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于... 查看详情
bootstrap从入门到精通（全）(代码片段)
...通（全）这篇文章的学习主要通过2021最新完整版Bootstrap教程（最给力的前端框架）bootstrap框架讲解-快速上手,最适合后端开发人员的bootstrap保姆级使用教程以及参照了一些知识点的补充Boorstrap教程网址通过我的这... 查看详情
bootstrap表单及表单布局
Bootstrap4支持二种表单布局方式：堆叠表单（垂直方向），内联表单（水平方向）。示例1（堆叠表单）示例2（内联表单）如果不满意上面的表单布局，可以通过网格（grid）或者表... 查看详情
在移动屏幕尺寸上将按钮更改为“btn-block”
...creensize【发布时间】：2015-03-2707:30:30【问题描述】：使用Bootstrap3，有没有办法让按钮在“xs”屏幕尺寸上使用btn-block类？目前我有一个包含3个下拉菜单和两个按钮的行的表单，在大屏幕和中屏幕上看起来都很好。当表单在小屏... 查看详情
bootstrap中css基础布局概述
1、bootstrap都使用了html5中的html和css元素，所以要使用html5的doctype属性<!DOCTYPEhtml><html>....</html>2、移动先行移动设备优先是Bootstrap3的最显著的变化。Bootstrap3的设计目标是移动设备优先，然后才是桌面设备。这实际上... 查看详情
Bootstrap 4 - 内联表单上的全宽表单字段
】Bootstrap4-内联表单上的全宽表单字段【英文标题】：Bootstrap4-fullwidthformfieldsoninlineform【发布时间】：2018-09-2412:39:22【问题描述】：我注意到旧Bootstrapv3和新BootstrapV4之间的内联表单的行为方式有所不同。我有两个代码sn-ps：引导... 查看详情
在移动设备中显示时的 Bootstrap 4 问题
】在移动设备中显示时的Bootstrap4问题【英文标题】：Bootstrap4issuewhendisplayinginmobile【发布时间】：2021-08-1104:52:39【问题描述】：我的引导页面有问题。我正在尝试创建一个带有标题徽标的登录表单，但是当我在手机中查看它时，... 查看详情
Twitter Bootstrap 内联表单间距
】TwitterBootstrap内联表单间距【英文标题】：TwitterBootstrapinlineformspacing【发布时间】：2013-11-2613:53:04【问题描述】：HereisaJSFiddleshowingmycodeinaction.我想使用TwitterBootstrap3考虑响应性，以最正确的方式在表单的不同部分之间添加几个... 查看详情
Bootstrap 无法在移动设备上正确缩放
】Bootstrap无法在移动设备上正确缩放【英文标题】：Bootstrapnotscalingproperlyonmobiledevices【发布时间】：2014-01-3023:51:37【问题描述】：在过去的几周里，我一直在为当地的一所大学开发一个Rails网站作为副项目。这是我在Rails中的第... 查看详情
移动单列表单布局，桌面双列
】移动单列表单布局，桌面双列【英文标题】：Singlecolumnformlayoutformobile,doublecolumnfordesktop【发布时间】：2018-11-2211:10:56【问题描述】：我有一个具有两列布局的表单。在每一列中，我都有一个标签，标签正下方是输入文本元素。... 查看详情
bootstrap简介
1.bootstrap是最受欢迎的HTML、CSS、JS框架，用于开发响应式布局、移动设备优先的web项目2.bootstrap为开发者提供大量CSS组键，减少开发过程中的CSS代码；还提供JS插件；3.bootstrap最大特点：移动设备优先、响应式布局（可以在PC ... 查看详情
移动web开发之响应式布局(代码片段)
...响应式开发原理1.1响应式开发原理1.2响应式布局容器二、bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3bootstrap布局容器2.4bootstrap栅格系统总结一、响应式开发原理1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和... 查看详情