1

I'm converting a Bootstrap 2.3 layout to Bootstrap 3 and I'm currently stuck with getting a div centered, while keeping its width automatically as wide as it's contents.

EDIT: an answer below fixed the issue with Firefox, so updated the question to reflect the main problem.

The login form as rendered with Bootstrap 2.3 - content is centered and .border and .well are only as wide as the content requires:

Bootstrap 2 layout

Now a try with Bootstrap 3: http://jsfiddle.net/yq9Ww/13/

BS 3 try

Evidently something is forcing the .well too wide, but for the love of god, I can't figure out how to collapse the width of .well to contents.

Can anybody shed light on how to accomplish the same result as with BS 2.3?

PS. I can't fix the width of the .border because the same layout is used for much wider content too and that has to fit also.

4

2 回答 2

2

事实证明，这是.input-group-btn搞砸了我的布局，因为出于某种原因或其他原因，Bootstrap 有这个规则：

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

并且可能与其他规则相结合，它强制.well采用它的所有父级宽度。

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

/* .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就足够了。

于 2013-09-17T20:12:29.003 回答
2

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

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-widthwell

.well-medium {
   min-width: 426px;
   max-width: 526px;
}
于 2013-09-17T11:04:20.570 回答