css - Twitter-bootstrap 表单没有响应

Question

我已经创建了此联系人，但当我更改浏览器大小或通过手机浏览时它似乎没有响应。 当我在我的手机上打开它或调整我的浏览器窗口大小时，输入区域变得比预期的要小。

我的代码:

<div class="container">
        <form class="well span8" action="" method="post">
        <div class="row">
            <div class="col-xs-4">
                <label>Name:</label>
                <input class="form-control" placeholder="Your Name" value="" type="text" name="name" required>

                <label>Email Address</label>
                <input class="form-control" placeholder="Your email address" value="" type="text" name="email" required>

                <label>Subject</label>
                <select class="form-control" id="subject" name="subject">
                    <option selected value="na">
                        Choose One:
                    </option>

                    <option value="query">
                        Query
                    </option>

                    <option value="suggestions">
                        Suggestions
                    </option>

                    <option value="advertise">
                        Advertise
                    </option>
                </select>
            </div>

            <div class="col-xs-5">
                <label>Message</label> 
                <textarea class="form-control" required id="message" name="message" rows="10"></textarea>

        <div style="margin-top:10px" class="form-group">
            <button class="btn btn-primary pull-right" type="submit">Send</button>
            </div>


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

你能告诉我如何让它响应吗？

Answer 1

这是一种方式(一种方式)

使用 col-sm-xx 而不是 col-xs-xx 得到更好的结果

Bootstrap :http://www.bootply.com/123382

HTML:

<div class="container">
        <form class="well col-sm-8 " action="" method="post">
        <div class="row">
            <div class="col-sm-4">
                <label>Name:</label>
                <input class="form-control" placeholder="Your Name" value="" type="text" name="name" required="">

                <label>Email Address</label>
                <input class="form-control" placeholder="Your email address" value="" type="text" name="email" required="">

                <label>Subject</label>
                <select class="form-control" id="subject" name="subject">
                    <option selected="" value="na">
                        Choose One:
                    </option>

                    <option value="query">
                        Query
                    </option>

                    <option value="suggestions">
                        Suggestions
                    </option>

                    <option value="advertise">
                        Advertise
                    </option>
                </select>
            </div>

            <div class="col-sm-5">
                <label>Message</label> 
                <textarea class="form-control" required="" id="message" name="message" rows="10"></textarea>

        <div style="margin-top:10px" class="form-group">
            <button class="btn btn-primary pull-right" type="submit">Send</button>
            </div>


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

更新 FATER 评论:

首先使用 col-sm-12 而不是 col-sm/xs-8 :

Bootstrap :http://www.bootply.com/123389