正文 

当前位置： 首页 > 问答 >

Twitter Bootstrap 内联表单间距

     2023-03-05     53

关键词：

【中文标题】Twitter Bootstrap 内联表单间距【英文标题】：Twitter Bootstrap inline form spacing 【发布时间】：2013-11-26 13:53:04 【问题描述】：

Here is a JSFiddle showing my code in action.

我想使用 Twitter Bootstrap 3 考虑响应性，以最正确的方式在表单的不同部分之间添加几个像素的间距。我查看了文档，但我仍然不清楚完成此操作的最佳方法是什么。

有什么想法吗？

这是我当前的 HTML 表单：

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="timezone">Timezone</label>
    <select class="form-control" id="timezone" name="timezone">
      <option value="America/St_Lucia">America/St_Lucia</option>
      <option value="Europe/Nicosia">Europe/Nicosia</option>
    </select>
  </div>

  <label class="radio-inline">
    <input id="timeformat-0" name="timeformat" value="24" type="radio" />
    19:00
  </label>

  <label class="radio-inline">
    <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
    7:00 PM
  </label>

  <button class="btn" type="submit">Save</button>
</form>

【问题讨论】：

水平间距还是垂直间距？哪些元素需要进一步分开？ 水平间距！我希望在下拉列表和单选按钮组之间添加大约 10 像素的空间，以及在单选按钮组和保存按钮之间添加一些空间。我不需要在单选按钮之间留出更多空间。 尝试使用引导网格 (getbootstrap.com/css/#grid)。 @meavo：我对使用网格犹豫不决的原因是因为我不想改变元素（或组）的宽度，我只想要它们之间的空间它们稍微宽一些。 您不会找到 Bootstrap 输入间距变量。随心所欲地应用 CSS。输入大小有 LESS 变量，但间距没有。 【参考方案1】：

您可以尝试将margin 用于.form-inline 的所有直系子女：

.form-inline > * 
   margin:5px 3px;

查看这个小提琴http://jsfiddle.net/MFKBj/10/

PD：我只在小提琴中添加!important 以确保它在你不需要的引导 CSS 之上。

【讨论】：

这在 Bootstrap 3 中不是必需的。您可以将元素包装在 div.form-group 中。例如，请参阅我的答案。【参考方案2】：

这里是一个使用 Bootstrap Grid 系统的例子。您可以应用一堆类来处理不同的视口。

<form class="form-inline" role="form">
  <div class="form-group row">
    <div class="col-md-6">
      <label class="sr-only" for="timezone">Timezone</label>
      <select class="form-control" id="timezone" name="timezone">
        <option value="America/St_Lucia">America/St_Lucia</option>
        <option value="Europe/Nicosia">Europe/Nicosia</option>
      </select>
    </div>
    <div class="col-md-3"">
      <label class="radio-inline">
        <input id="timeformat-0" name="timeformat" value="24" type="radio" />
        19:00
      </label>
    </div>
    <div class="col-md-3">
      <label class="radio-inline">
        <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
        7:00 PM
      </label>
    </div>
    <button class="btn" type="submit">Save</button>
  </div>
</form>

【讨论】：

【参考方案3】：

我和 OP 有同样的问题 - 他问的是关于水平间隔的问题 - BS 很好地将东西粉碎在一起 as seen here。这是我的解决方案：

.form-inline label 
    margin-left: 5px;

【讨论】：

【参考方案4】：

这就是我的做法；为所有标签和控件添加最小间距，并在容器上使用负边距以保持所有内容正确对齐。

.form-inline 
    margin: 0 -3px;


.form-inline .form-group label,
.form-inline .form-group input,
.form-inline .form-group select 
    margin: 0 3px;

【讨论】：

我更喜欢你的回答，因为它提供了更好的整体间距【参考方案5】：

在 Bootstrap 4 中，您有 Spacing utilities。

<div class="row">
    <div class="col-sm-6 mb-lg-2">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>

【讨论】：

【参考方案6】：

在 Bootstrap 3 中，您可以将元素包装在 div.form-group 中，如下所示：

<div class="form-group">
  <label class="radio-inline">
    <input id="timeformat-0" name="timeformat" value="24" type="radio" />
    19:00
  </label>
</div>

<div class="form-group">
  <label class="radio-inline">
    <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
    7:00 PM
  </label>
</div>

您可以在 Bootstrap 3 文档的这一部分看到这一点：

https://getbootstrap.com/docs/3.3/css/#forms-inline

【讨论】：

这不提供问题正在寻找的间距。 不提供空间，已在原问题中使用

具有 2 行和内联表单的 Bootstrap 4 导航栏

】具有2行和内联表单的Bootstrap4导航栏【英文标题】：Bootstrap4navbarwith2rowsandinlineform【发布时间】：2018-08-2220:08:45【问题描述】：好的，所以有很多这样的问题，但是在尝试了其他类似问题的一些答案中的代码之后，我仍然卡住... 查看详情

bootstrap表单class使用记录

由于总是忘记表单的类的作用，故边用边记录下来，持续更新form-control添加在<input>中，为表单控件增加样式 control-label添加在<label>中，文本右对齐 form-group控制整个表单中的元素获取最佳间距，表单本身也会跟... 查看详情

Bootstrap 4内联表单全宽

】Bootstrap4内联表单全宽【英文标题】：Bootstrap4inlineformfullwidth【发布时间】：2017-08-0805:56:47【问题描述】：我有一个带有搜索栏和旁边的搜索按钮的内联表单。如何强制input-groupdiv跨越Bootstrap4中的整个列，最好不使用自定义CSS？... 查看详情

使用 Twitter Bootstrap 的中心表单

】使用TwitterBootstrap的中心表单【英文标题】：CenterFormusingTwitterBootstrap【发布时间】：2012-05-0808:00:24【问题描述】：我正在使用Twitter的Bootstrap构建一个表单（由django提供）。我想让表单居中在页面上，但我遇到了一些问题。这是... 查看详情

Bootstrap 4 - 内联表单上的全宽表单字段

】Bootstrap4-内联表单上的全宽表单字段【英文标题】：Bootstrap4-fullwidthformfieldsoninlineform【发布时间】：2018-09-2412:39:22【问题描述】：我注意到旧Bootstrapv3和新BootstrapV4之间的内联表单的行为方式有所不同。我有两个代码sn-ps：引导... 查看详情

在移动设备上将 Bootstrap 布局从内联表单更改为网格

】在移动设备上将Bootstrap布局从内联表单更改为网格【英文标题】：ChangeBootstraplayoutfrominlineformtogridonmobiledevice【发布时间】：2016-08-2122:02:39【问题描述】：我有一个复杂的Web表单，其中一行包含许多字段。Bootstrap内联表单在大... 查看详情

Twitter Bootstrap 模态表单提交

】TwitterBootstrap模态表单提交【英文标题】：TwitterBootstrapModalFormSubmit【发布时间】：2013-04-1518:35:09【问题描述】：我最近一直在摆弄twitterbootstrap，使用java/jboss，我一直在尝试从Modal界面提交表单，该表单只包含一个隐藏字段，没... 查看详情

Twitter Bootstrap 模态表单：如何拖放？

】TwitterBootstrap模态表单：如何拖放？【英文标题】：TwitterBootstrapModalForm:Howtodraganddrop?【发布时间】：2012-09-1711:32:33【问题描述】：我希望能够移动（在灰色背景上，通过拖放）Bootstrap2提供的模态表单。谁能告诉我实现这一目标... 查看详情

Twitter Bootstrap 模态表单：如何拖放？

】TwitterBootstrap模态表单：如何拖放？【英文标题】：TwitterBootstrapModalForm:Howtodraganddrop?【发布时间】：2012-09-1711:32:33【问题描述】：我希望能够移动（在灰色背景上，通过拖放）Bootstrap2提供的模态表单。谁能告诉我实现这一目标... 查看详情

在表单提交上显示 Twitter Bootstrap 模式

】在表单提交上显示TwitterBootstrap模式【英文标题】：ShowTwitterBootstrapmodalonformsubmit【发布时间】：2014-01-1907:28:19【问题描述】：我正在尝试在提交表单时显示模态，例如：表单有两个文本字段，如果其中一个已填写，则模式将向... 查看详情

Twitter Bootstrap 2 模态表单对话框

】TwitterBootstrap2模态表单对话框【英文标题】：TwitterBootstrap2modalformdialogs【发布时间】：2012-03-1002:03:52【问题描述】：我有以下对话框：<divclass=\'modal\'id=\'myModal\'><divclass=\'modal-header\'><aclass=\'close\'data-dismiss=\'modal\' 查看详情

如何在 twitter-bootstrap 模式窗口中插入 django 表单？

】如何在twitter-bootstrap模式窗口中插入django表单？【英文标题】：HowdoIinsertadjangoformintwitter-bootstrapmodalwindow?【发布时间】：2012-07-0119:55:18【问题描述】：四月份有人问过确切的samequestion，没有任何答案。但由于他提供的信息太少... 查看详情

使用响应式 Twitter Bootstrap 内容重叠水平表单的问题

】使用响应式TwitterBootstrap内容重叠水平表单的问题【英文标题】：TroublewithcontentoverlappinghorizontalformusingresponsiveTwitterBootstrap【发布时间】：2013-01-0115:20:37【问题描述】：我花了更多的时间来尝试修复这个愚蠢的错误。我有一个显... 查看详情

bootstrap-内联表单水平（横向）表单响应式图片辅助类[转]

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><!--媒体查询--><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewp 查看详情

使用 Twitter Bootstrap 切换单选按钮，获取表单输入的简洁方式是啥？

】使用TwitterBootstrap切换单选按钮，获取表单输入的简洁方式是啥？【英文标题】：WithTwitterBootstraptoggleradiobuttons,what\'sthecleanwaytogetforminput?使用TwitterBootstrap切换单选按钮，获取表单输入的简洁方式是什么？【发布时间】：2012-07-13... 查看详情

Twitter Bootstrap：让表单输入和按钮与 Chrome 和 Firefox 中的高度相同

】TwitterBootstrap：让表单输入和按钮与Chrome和Firefox中的高度相同【英文标题】：TwitterBootstrap:GettingFormInputsandButtonstobesametheheightinChromeandFirefox【发布时间】：2013-06-0500:41:47【问题描述】：使用TwitterBootstrap2.3.2我有一个input-append表单... 查看详情

吴裕雄bootstrap前端框架开发——bootstrap排版：内联子标题(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-内联子标题</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/ 查看详情

如何使 Twitter-Bootstrap 3 导航栏链接居中？

】如何使Twitter-Bootstrap3导航栏链接居中？【英文标题】：HowcanIcenterTwitter-Bootstrap3navbarlinks?【发布时间】：2013-08-0806:05:21【问题描述】：如何将我设置的jsFiddle中的按钮居中，以使按钮在导航栏中和整个导航栏中等间距和居中？htt... 查看详情