Html 引导3内联布局不工作

我在Bootstrap3中使用以下标记

<div class="row" style="margin-bottom: 12px">
    <form class="form-inline">
        <div class="form-group">
            <label for="startDate">Start Date:</label>
            <input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
        </div>
        <div class="form-group">
            <label for="endDate">End Date:</label>
            <input type="date" class="form-control" id="endDate" value="11/2/1972" placeholder="End Date">
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
    </form>
</div>

开始日期：
结束日期：
更新

根据我能找到的所有例子，这应该把所有东西都放在内联。然而，对我来说，标签显示在文本框上，而不是文本框的侧面

我尝试不使用

封装标记。我还尝试使用

而不是

，但这些都没有任何区别。我已经三次检查了标记。有人能看出我做错了什么吗

---

如果我强迫容器更宽，那么它看起来更接近我所期望的。但我所看到的例子中没有一个能做到这一点。我不希望指定固定的宽度。

您的代码很好，但请注意 控件仅在至少768px宽的视口中内联显示，以说明移动设备上的窄视口

这是我的代码截图

---

我以前在使用mvc添加文本框时遇到过这个问题。我通过重写表单组类或在div上使用内联样式设置display:flex解决了这个问题；这将迫使它排成一行

<div class="form-group" style="display:flex;">
    <label for="startDate">Start Date:</label>
    <input type="date" class="form-control" id="startDate" value="10/29/1961" placeholder="Start Date">
</div>

开始日期：

这是由于您使用的Bootstrap 3的版本。在中的内联表单中，

表单控件

类更改为

width:auto

。因此，所有版本都应该显示您看到的问题。在发布之后，它应该不再是一个问题

从：

：随着表单验证更新，我们重置了一些关键表单和图标样式：

• 内联表单中的所有.form控件都设置为宽度：auto；防止.form标签在.form组中堆叠
• 删除所有select.form-control设置，因为这些设置现在由上述更改继承
• 删除宽度：1米；因为它实际上不可能被覆盖

3.1.0和当前3.3.6之间的任何版本都应该按照您的预期工作

也就是说，如果您不能升级，您仍然可以自己实现。见第三段。 v3.0.0的问题示例

开始日期：
结束日期：
更新

您的标记看起来不错，我认为，之所以会出现问题，是因为您自己的样式覆盖了某些引导的样式。试着打开inspector，你会发现Style有什么问题，我无法在小提琴中重现。你能给我一个链接吗？我使用了你的标记和引导3.3.6。谢谢。我相信你是对的。但我的屏幕截图来自桌面上的浏览器（Edge和Chrome）。我的两台显示器设置为1920 x 1080。两种浏览器都被放大到100%。我的Windows设置设置为100%显示文本。为什么不使用网格使其水平？使用col-xs-2 vor标签和col-xs-10 vor输入。