DIV 中的引导响应问题答案

【问题标题】：Bootstrap Responsive Issue in DIVDIV 中的引导响应问题
【发布时间】：2013-10-12 12:41:55
【问题描述】：

我为我的登录框创建了一个“持有人”

.box{
background-color: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
padding: 1em;
border: 1px solid #d8dadd;
    }

.box-login{
    margin: 0 auto;
    width: 390px;
}

但问题是框内的项目（文本框）没有响应，它就像一个无响应的项目。

知道如何解决这个问题吗？

提前致谢

【问题讨论】：

也发布您的 HTML。但是你基本上只需要制作max-width: 390px;，然后设置width: 100%;、float: left;和position: relative;，让它随着周围元素的变化而变化。编辑：如果您希望您的盒子随着某人打字而增长，那是一个完全不同的故事。
您可以使用一些 CSS media queries 响应式设置宽度。

标签： jquery html css twitter-bootstrap responsive-design

【解决方案1】：

bootstrap 中的元素只有在必须响应父元素大小的变化时才会做出响应。

由于您为 .box-login 类指定了固定宽度，因此框不会响应宽度，因此里面的项目也不会响应。

像这样在 css 中指定宽度和最大宽度：

.box-login{
    margin:0 auto;
    /* if you want a slight margin on smaller viewports, lower the width value */ 
    width:100%;
    max-width:390px;
}

【讨论】：

【解决方案2】：

设置最大宽度

.box-login{
    margin: 0 auto;
    width: 390px;
    max-width: 100%;
}

【讨论】：

不应该是width:100%;和max-width: 390px;吗？
我的建议是：jsfiddle.net/Xd7TW/1。 Bootstrap 核心使用width: (x)%; max-width: (x)px; 语法，这就是为什么建议这样做。

【解决方案3】：

由于您为 .box-login 类指定了宽度，因此它不会以响应方式运行。如果您希望 box-login 类具有响应性，则应将宽度设置为 100% 并指定 max-width。这是css：

.box-login{
    margin: 0 auto;
    width: 100%;
    max-width: 390px;
 }

【讨论】：