Bootstrap 3表单内联和居中的div宽度到内容答案

【问题标题】：Bootstrap 3 form-inline and centered div width to contentBootstrap 3表单内联和居中的div宽度到内容
【发布时间】：2013-09-18 04:25:31
【问题描述】：

我正在将 Bootstrap 2.3 布局转换为 Bootstrap 3，我目前坚持让 div 居中，同时自动保持其宽度与其内容一样宽。

编辑：下面的答案修复了 Firefox 的问题，因此更新了问题以反映主要问题。

使用 Bootstrap 2.3 呈现的登录表单 - 内容居中，.border 和 .well 仅与内容所需的一样宽：

现在尝试使用 Bootstrap 3： http://jsfiddle.net/yq9Ww/13/

显然有些东西迫使.well 太宽，但看在上帝的份上，我不知道如何将.well 的宽度折叠成内容。

谁能阐明如何实现与 BS 2.3 相同的结果？

PS。我无法修复 .border 的宽度，因为相同的布局也用于更广泛的内容，而且它也必须适合。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

从您的自定义 css 中删除 display: inline-block;。

div.border {
    /* display: inline-block; */
    border: 1px solid #205081;
    padding: 28px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

您为什么不为well 元素定义min-width 和max-width？

.well-medium {
   min-width: 426px;
   max-width: 526px;
}

【讨论】：

谢谢，这解决了 Firefox 问题，但主要问题仍然存在 - 如何折叠 .well 的 with
我更新了问题以澄清并添加我最近的发现。
好吧，如果较低的.well 甚至没有达到min-width，max-width 也无济于事。我想我应该去阅读更多关于 CSS 表格的信息——这似乎更接近答案。

【解决方案2】：

原来是.input-group-btn弄乱了我的布局，因为某种原因，Bootstrap 有这个规则：

.input-group-addon, .input-group-btn {
  width: 1%;
}

可能与其他规则结合使用，它强制 .well 占据其父级的所有宽度。

对于xs 设备，输入必须是 100 % 宽，然后修复取消设置非 xs 屏幕的width：

/* .input-group inside .border causes 100% width (some BS3 stuff) */
@media(min-width: 768px){
    div.border .input-group-addon, div.border .input-group-btn {
        width: auto;
    }
}

然后将.border 设为内联块：

div.border {
  /* ... */
  display: inline-block;
}

这是 JSFiddle 在所有屏幕尺寸上的行为都符合预期：

http://jsfiddle.net/yq9Ww/16/

更新：这似乎只在 WebKit 浏览器中存在。对于 Firefox，设置 inline-block 就足够了。

【讨论】：