twitter-bootstrap - Bootstrap 3.0 的行有 margin-left -30px

Question

从 Bootstrap 2 升级到 Bootstrap 3.0

主要变化之一是不再有“行流体”，而是使用“行”

但是，当尝试实现以下内容时：

<div class="widget-content">
            <div class="row">
                <div class="col-md-11">

                    <div class="form-group">
                        <div class="col-md-2">
                            <label>Subject</label>
                        </div>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="meetingSubject" name="meetingSubject"
                                   value="<?php echo $meeting->Subject ?>"
                                   autocomplete="off"
                                   placeholder="Meeting Desc">
                        </div>
                    </div>
               <div> 
           </div>
</div>

看来我的标签离左边太近了，当我检查时，发现该行的边距左 -30px。见下图：

我不明白这是为了什么。有没有什么优雅的方法可以用这些标准来解决这个问题：

1. 不更改引导核心 css（以便更容易更新引导版本）

2. 不会让我重蹈覆辙。（我正在考虑在下面实现 - 但由于 row 总是在任何地方使用，这个解决方案对我来说感觉是个坏主意）

    <div class="widget-content">
           <div class="row rowpad30">
           ...
           </div>
    </div>
   
   .rowpad30
   {
     padding-left: 30px;
     padding-bottom: 5px;
   }
   

Answer 1

也许您应该将细分包装成一行：

<div class="widget-content">
            <div class="row">
                <div class="col-md-11">
                  <div class="row">   //  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
                    <div class="form-group">
                        <div class="col-md-2">
                            <label>Subject</label>
                        </div>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="meetingSubject" name="meetingSubject"
                                   value="<?php echo $meeting->Subject ?>"
                                   autocomplete="off"
                                   placeholder="Meeting Desc">
                        </div>
                    </div>
                 </div> // <<<<<<<<<<<<<<<<<<<<<<<<

               <div> 
           </div>
</div>