列中的Bootstrap字段

Question

我想知道我在这里做错了什么:http://www.bootply.com/bURS2tSeSU

<div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading">Contact Us</div>
        <div class="panel-body">
<form class="form-horizontal">
<fieldset>

<!-- Text input-->
<div class="form-group">
  <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md">
  <span class="help-block">help</span>  
</div>

<!-- Textarea -->
<div class="form-group">
    <textarea class="form-control" id="message" name="message">default text</textarea>
</div>
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
   </fieldset>
</form>
</div>

 </div> 
   </div>

我的面板主体应该有填充,但似乎填充对表单字段没有生效.任何人都可以告诉我为什么会发生这种情况以及我如何让我的田地坐在面板体内而不是边缘.

Answer 1

你的问题是你把所有东西都塞进了一个专栏.列中的每个组件占用相等的宽度(由您指定col-md-4).我用一行代替你的列,并用容器包装所有东西(你总是需要这样做).

码

<div class="container">
<div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">Contact Us</div>
        <div class="panel-body">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md"> <span class="help-block">help</span> 
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <textarea class="form-control" id="message" name="message">default text</textarea>
                </div>
                <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
            </fieldset>
        </div>
    </div>
</div>

文件:

行必须放在.container(固定宽度)或.container-fluid(全宽)内,以便正确对齐和填充.

BOOTPLY