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

Question

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

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

Answer 1

这样就可以了！

Demo

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

Answer 2

我可以看到你在标记上使用网格系统，你应该看看这个网格系统是否为你提供了一个选项，这将是你完成所需的更好的方法。

无论如何，你应该使用'％``代替像素或自动，例如：

CSS

input{
    width: 80%;
}

如果它可能是一个网址，所以我们无法看一眼会更容易帮助你

Answer 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