Html 获取Bootstrap.css列表组以占据移动应用程序页面的整个宽度_Html_Css_Twitter Bootstrap_Cordova

Html 获取Bootstrap.css列表组以占据移动应用程序页面的整个宽度

html css twitter-bootstrap cordova

Html 获取Bootstrap.css列表组以占据移动应用程序页面的整个宽度,html,css,twitter-bootstrap,cordova,Html,Css,Twitter Bootstrap,Cordova,我正在开发一个带有Twitter引导和PhoneGap的移动应用程序。我要找的是一个简单的列表组，其中每个项目占据整个页面的宽度。目前，列表组中有我想去掉的左右填充。屏幕截图如下：我的页面html如下所示： <html doctype and head above> <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

我正在开发一个带有Twitter引导和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>


切换导航




标题：第22条军规

标题：永别了，武器作者：欧内斯特·海明威

app.initialize（）；

after标头类定义如下： .在标题之后{ 填充：50px； }
在我看来很有希望

查看此live:
由于本机网格结构，引导会自动添加一些填充，因此实际上可能需要负的左/右填充。我认为15px是默认的引导偏移量，因此您可能需要执行
填充：50px-15px谢谢您的评论@Xenocideae。在这种情况下，我看不出您需要任何负的左右填充，因为列表项不在通常的引导容器>行支架中。检查我建议的结果@，如果我遗漏了什么，请告诉我 .after-header { padding:50px 0px; }