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可以获得更好的结果

Bootply ：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>

更新评论：

先使用col-sm-12代替col-sm/xs-8：

Bootply ：http://www.bootply.com/123389

Answer 2

使用bootstraps类.col-xs- .col-sm- .col-md-和.col-lg-使其对您可以在此处看到的不同设备做出响应

http://getbootstrap.com/css/#grid-options

我已经创建了一个非常简单的例子，我想它会对你有帮助。

<div class="container">
<div class="row">
  <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6"><input style="width:100%" type="text"></div>
  <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6"><input style="width:100%" type="text"></div>
  </div>
</div>

<强>工作

http://www.bootply.com/123390

Twitter-bootstrap表单没有响应

2 个答案: