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

【问题标题】：Why doesn't my Bootstrap 3 row fill the parent width?为什么我的 Bootstrap 3 行没有填充父宽度？
【发布时间】：2014-04-28 01:41:39
【问题描述】：

我正在尝试使用 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>

少

.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%));
}

【问题讨论】：

Give us a Fiddle.
@calvin 谢谢！我用小提琴为你更新了帖子。
只是一个小的风格提示：您只需要为具有相同#所需列的最小屏幕设备声明一个列大小：例如，“col-lg-2 col-md- 6 col-sm-6 col-xs-6" 始终可以写成 "col-lg-2 col-xs-6"，结果相同（复制 + 粘贴更少）
@JoelBurton 感谢您的提示！

标签： html css twitter-bootstrap-3 less

【解决方案1】：

如果您将行嵌套在列中，您必须了解在 .col-lg-6 .row 内，整个事物都是新的（100%），您必须在其中使用 .col-lg-12 来填充它。

这个 sn-p 应该适合你

<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>

【讨论】：