DIV 中的引导响应问题

Posted 2023-03-06

【中文标题】DIV 中的引导响应问题

【英文标题】：Bootstrap Responsive Issue in DIV

【发布时间】：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 响应式设置宽度。

【参考方案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;