html - 列中的 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>

Documentation :

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

BOOTPLY