Question

我已经研究过这个，并且无法找到任何信息。我开始思考，也许它与媒体查询有关，但我真的无法为我工作。

我的问题是，我怎样才能做出回应？我使用Twitter Bootstrap并遇到了一个独特的问题。

我有一个简单的包装，看起来像这样：

.wrap {
    width: 800px;
    margin: 0 auto;
}

然后，我有一个表格，看起来像这样：

<div class="wrap">
    <div class="col-sm-12">
        <form class="form-inline" name="contactform">
            <div class="col-sm-6 form-group form-sty">
                <label class="sr-only" for="first" required>First Name</label>
                <input type="text" class="form-control-sty" name="first" placeholder="First Name">
            </div>
            <div class="col-sm-6 form-group form-sty">
                <label class="sr-only" for="last" required>Last Name</label>
                <input type="text" class="form-control-sty" name="last" placeholder="Last Name">
            </div>
            <div class="col-sm-6 form-group form-sty">
                <label class="sr-only" for="phone" required>Phone</label>
                <input type="text" class="form-control-sty" name="phone" placeholder="Phone">
            </div>
            <div class="col-sm-6 form-group form-sty">
                <label class="sr-only" for="email" required>Email</label>
                <input type="email" class="form-control-sty" name="mailfrom" placeholder="Email">
            </div>
            <div class="col-sm-12 form-sty">
                <label class="sr-only" for="comment">Comment</label>
                <textarea class="form-control-sty" name="message" id="message" rows="7" placeholder="What's on your mind?" required></textarea>
            </div>
            <div class="col-sm-12 form-sty form-sty-btn">
                <button type="submit" value="Submit" class="btn btn-default col-sm-12">Send</button>
            </div>
        </form>
    </div>
</div>

我遇到的问题是，因为它位于包装内部，当网站缩小时，表单也无法扩展，因为它填充了整个800px包装。

我不是在寻找答案，因为我正在寻找建议吗？

感谢您提供任何帮助。

您还可以在此处查看实际网站以获得更好的主意：www.bestillcreative.com

Answer 1

.wrapper { 宽度：100％：最大宽度：800像素; }

Answer 2

＆＃13;

.wrap {
   width:100%;
   max-width:800px; 
   margin: 0 auto;
}
.form-sty{
  margin:10px 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
    <div class="col-sm-12">
        <form class="form-inline" name="contactform">
            <div class="col-sm-6 form-group form-sty">
            <div class="col-sm-3 col-md-4"> <label  for="first" required>First Name</label></div>
            <div class="col-sm-3 col-md-2">   <input type="text" class="form-control-sty" name="first" placeholder="First Name"></div>
            </div>
            <div class="col-sm-6 form-group form-sty">
            <div class="col-sm-3 col-md-4"> <label for="last" required>Last Name</label></div>
            <div class="col-sm-3 col-md-2"><input type="text" class="form-control-sty" name="last" placeholder="Last Name"></div>
            </div>
            <div class="col-sm-6 form-group form-sty">
            <div class="col-sm-3 col-md-4"> <label  for="phone" required>Phone</label></div>
            <div class="col-sm-3 col-md-2"><input type="text" class="form-control-sty" name="phone" placeholder="Phone"></div>
            </div>
            <div class="col-sm-6 form-group form-sty">
            <div class="col-sm-3 col-md-4"><label  for="email" required>Email</label></div>
                <div class="col-sm-3 col-md-2"><input type="email" class="form-control-sty" name="mailfrom" placeholder="Email"></div>
            </div>
            <div class="col-sm-6 form-sty">
            <div class="col-sm-3 col-md-4"><label  for="comment">Comment</label></div>
                <div class="col-sm-9 col-md-8"><textarea class="form-control-sty" name="message" id="message" rows="7" placeholder="What's on your mind?" required></textarea></div>
            </div>
            <div class="col-sm-12 form-sty form-sty-btn">
                <button type="submit" value="Submit" class="btn btn-default col-sm-12">Send</button>
            </div>
        </form>
    </div>
</div>

＆＃13;

试试这个结构

你怎么能做出回应？

2 个答案: