Bootstrap 3 form-inline和居中div宽度到内容

Question

我正在将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的宽度，因为相同的布局也用于更广泛的内容，并且也必须适合。

Answer 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;
}

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

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

Answer 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就足够了。