让 Bootstrap.css 列表组占据移动应用页面的整个宽度答案

【问题标题】：Getting a Bootstrap.css list-group to take up the entire width of a mobile app page让 Bootstrap.css 列表组占据移动应用页面的整个宽度
【发布时间】：2014-02-05 22:24:18
【问题描述】：

我正在使用 Twitter Bootstrap 和 PhoneGap 开发一个移动应用程序。我正在寻找的是一个简单的列表组，其中每个项目占据页面的整个宽度。目前，列表组具有我想要摆脱的左右填充。截图如下：

我的页面html如下：

<html doctype and head above>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">My Books Bootstrap</a>
            </div>
            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Add</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div>

        <div class="after-header">
              <ul class="list-group">
                <li class="list-group-item"><strong>Title: Catch-22</strong><p>Author: Joseph Heller</p></li>
                <li class="list-group-item"><strong>Title: A Farewell to Arms</strong><p>Author: Ernest Hemmingway</p></li>
              </ul>
        </div>


        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

after-header 类定义如下： .after-header { 填充：50px； }

【问题讨论】：

标签： html css twitter-bootstrap cordova

【解决方案1】：

.after-header { padding:50px 0px; }

对我来说看起来很有希望。

现场观看：http://jsfiddle.net/panchroma/tzxhp/

【讨论】：

Bootstrap 由于原生网格结构而自动添加了一些填充，因此您实际上可能需要负左/右填充。我认为 15px 是默认的 Bootstrap 偏移量，所以你可能需要做padding:50px -15px;
感谢您的评论@Xenocideae。在这种情况下，我没有看到您需要任何负的左右填充，因为列表项不在通常的 Bootstrap 容器 > 行脚手架内。检查我的建议 @jsfiddle.net/panchroma/tzxhp/embedded/result 的结果，如果我遗漏了什么，请告诉我