为什么调整窗口大小时输入标签不缩小答案

【问题标题】：Why does the input tags not shrink when the window is resized为什么调整窗口大小时输入标签不缩小
【发布时间】：2013-05-27 19:30:09
【问题描述】：

当我将窗口缩小时，我想知道为什么文本框的宽度也不缩小？

在 FF、IE 和 Chrome 上看起来是一样的。调整窗口大小时，如何让文本框适应它们的宽度？

我可以给文本输入这个样式：`style="display:block;width:auto"

然后文本框不会溢出 div 但它似乎有一个固定的宽度并且不再拉伸到 div 结束我根本不喜欢的东西。

<div class="row">
    <div class="span6">
        <div class="row">
            <div style="background-color: green" class="span3">
                <span>Schoolyear name</span>
            </div>
            <div style="background-color: orange" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red;" class="span3">
                <span>Schoolyear from</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red" class="span3">
                <span>Schoolyear to</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <input type="text" />
            </div>
        </div>
        <div class="row">
            <div style="background-color: red" class="span3">
                <span>Start week</span>
            </div>
            <div style="background-color: yellow" class="span3">
                <label class="radio">
                    <input type="radio" />Week A</label>
                <label class="radio">
                    <input type="radio" />Week B</label>
            </div>
        </div>
        <div class="row">
            <div style="background-color: blue" class="span3">
                <span>Weekly rotation</span>
            </div>
            <div style="background-color: greenyellow" class="span3">
                <select>
                    <option>Please select</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
        </div>
    </div>
    <div style="background-color: gray" class="span3">
        <div class="row">
            <div class="span3">Days to display</div>
            <div class="span3">
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
                <label class="checkbox">
                    <input type="checkbox" />Sunday</label>
            </div>
        </div>
    </div>
    <div class="span3">
        <div class="row">
            <div style="background-color: red" class="span3">Weeks start day</div>
            <div style="background-color: yellow" class="span3">
                <label class="radio">
                    <input type="radio" />Tuesday</label>
            </div>
            <div style="background-color: red" class="span3">
                <label class="radio">
                    <input type="radio" />Monday</label>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div style="background-color: burlywood" class="span12">99999999999999999999</div>
</div>

【问题讨论】：

你能在这里安排一个工作吗：jsbin.com
jsbin.com/ehidac/1/edit 抱歉，Arpit 但似乎引导 CDN 链接不起作用......引导似乎没有被使用。我不知道如何解决这个问题。

标签： css html twitter-bootstrap

【解决方案1】：

这样就可以了！

Demo

input[type="text"], select{
    width:100%;
    box-sizing: border-box;
}

【讨论】：

您知道为什么您的 CSS 不适用于底部选择标签吗？见“请选择”：select, input[type="text"]{ width:100%; box-sizing：边框框； } 这不起作用。
是的，更新了解决方案！
它在这里工作正常jsfiddle.net/QNMAd/1 你能在 jsfiddle 上再次模拟你的实际问题吗？
这很奇怪。现在它可以在 jsfiddle 中工作（当我删除“，选择”时，我看到了效果，但是当我在本地电脑上使用你的代码时它不会改变任何东西。更奇怪的是，当我添加“，选择”时通过开发人员工具浏览器 texbox 拉伸并适合其父 div。我已经删除了我的本地缓存...仍然无法在我的电脑上工作 WTF！？使用这个：
是的，我猜从引导程序中可能会使用其他一些 css 正在为选择标签设置一些值......就像在 bootstrap.css 中一样：select { width: 220px;背景颜色：#ffffff；边框：1px 实心#cccccc； }

【解决方案2】：

我可以看到您在标记上使用了网格系统，您应该看看这个网格系统是否为您提供了执行此操作的选项，这将是实现您想要的更好的方法。

无论如何，你应该使用 `%`` 而不是像素或自动，例如：

CSS

input{
    width: 80%;
}

如果它可能是一个 url，所以我们无法查看会更容易帮助您

【讨论】：

【解决方案3】：

你要做的是：

    <div style="background-color: orange; width:100%" class="span3">
                                          ^^^^^^^^^^|________________set this as per your size in % or px
          <input type="text" style="width:50%;"
                                   ^^^^^^^^^^|___________set this in % as per your need.

查看Resize Input Demo

【讨论】：