为什么我的Bootstrap 3行没有填充父宽度？

Question

我尝试使用Bootstrap 3为模态制作基于网格的模板（我也使用Bootstrap）。出现模式，所有内容都在那里......但样式关闭了。看起来row类不会填充其父容器，即使没有样式可以实现这一点。这里是screenshot - 您可以看到标题中的行和正文中的行都不会占用其父级的宽度。我曾尝试在其他SO帖子中寻找信息，但我似乎无法找到有关为什么行不会填充其父宽度的任何内容。

更新

这里是JSFiddle。看起来它实际上适用于JSFiddle ...这意味着它不是立即模板的问题，所以我正在研究其他可能的原因。谢谢你的提示，卡尔文！

HTML

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header ht-modal-header">
            <h1>
                <a href="#">Bombay Teen Challenge</a>
            </h1>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <address>
                        1 Chium Village, Ambedkar Road<br/>
                        Bandra West<br/>
                        Mumbai 400052
                    </address>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <abbr>e: </abbr> kkdevaraj@bombayteenchallenge.org<br/>
                    <abbr>p: </abbr> +91 22 2604 2242
                </div>
            </div>
        </div>
        <div class="modal-body ht-modal-body">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="types">
                        <span class="prevention-label"></span> Prevention, Education, Teen
                    </div>
                    <div class="facebook">
                        <span class="fa fa-facebook-square fa-2x"></span> BombayTeenChallenge
                    </div>
                    <div class="twitter">
                        <span class="fa fa-twitter-square fa-2x"></span> @BombayTC
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="people">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <label>People: </label>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                Dr. Rama R. Rao<br/>
                                Monte Hackney
                            </div>
                        </div>
                    </div>
                    <div class="partners">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <label>Partners: </label>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                None Available
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

LESS

.prevention-label {
  width: 24px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  background-color: #4ECDC4;
}

.ht-modal-header {
  a {
    &:hover, &:focus {
      color: white;
    }
    color: white;
  }

  color: white;
  background: linear-gradient(@ht-teal, darken(@ht-teal, 5%));
  background: -webkit-gradient(@ht-teal, darken(@ht-teal, 5%));
  background: -o-linear-gradient(@ht-teal, darken(@ht-teal, 5%));
  background: -moz-linear-gradient(@ht-teal, darken(@ht-teal, 5%));
}

Answer 1

如果你在列中嵌套行，你必须明白在.col-lg-6 .row内部整个事物开始新的（100％），而你要填充它必须在其中使用.col-lg-12。

此代码段适用于您

<div class="col-sm-6">
    <div class="people">
        <div class="row">
            <div class="col-sm-12">
                <label>People: </label>
            </div>
            <div class="col-sm-12">
                Dr. Rama R. Rao<br/>
                Monte Hackney
            </div>
        </div>
    </div>
    <div class="partners">
        <div class="row">
            <div class="col-sm-12">
                <label>Partners: </label>
            </div>
            <div class="col-sm-12">
                None Available
            </div>
        </div>
    </div>
</div>