Question

我正在努力使这个标题适合整个页面。出于某种原因，文本周围有一个填充，不允许我适应它。我将列（Bootstrap）的填充设置为0，但这似乎没有帮助。只要我增加font-size＆gt; 230px，它刚刚渗入第二行。有人能帮助我吗？

这是一张图片：http://imgur.com/ovT9XM4。蓝色区域如何不会捕捉到屏幕的末尾。

CSS：

 <style>
     body {
        background-color:black;
        margin:0px;
        padding:0px;
    }

    div {
        margin:0px;
        padding:0px;
    }

    .header {
        color:white;
        font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial";
    }

    .box {
        background-color:aqua;
    }

    #titlebig {
        font-weight:normal;
        font-size:232px;
        text-align:left;
        margin-left:-29px;
        margin-top:-76px;
    }

    .row-no-padding {
      [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

</style>

HTML：

<body>
    <div class="container-fluid header">
        <!-- Grid structure -->
        <div class="row row-no-padding">
                <div id="titlebig" class="col-xs-12 box">
                    Let's Create
                </div>
        </div>
    </div>
  </body>

Answer 1

您只需要从margin-left: -29px;删除#titlebig即可。例如：

body {
       background-color: black;
       margin: 0px;
       padding: 0px;
     }
     div {
       margin: 0px;
       padding: 0px;
     }
     .header {
       color: white;
       font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial";
     }
     .box {
       background-color: aqua;
     }
     #titlebig {
       font-weight: normal;
       font-size: 232px;
       text-align: left;
       margin-left: -29px;
       margin-top: -76px;
     }
     .row-no-padding {
       [class*="col-"] {
         padding-left: 0 !important;
         padding-right: 0 !important;
       }
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<body>
  <div class="container-fluid header">
    <div class="row row-no-padding">
      <div id="titlebig" class="col-xs-12 box">
        Let's Create
      </div>
    </div>
  </div>
</body>

Answer 2

因为col-xs-*每https://github.com/twbs/bootstrap/blob/3487898a6af8c1d5b12f7b040d30e71b19e34923/less/mixins/grid.less#L24包含float: left。

如果删除col-xs-12类，它将是全宽的。

说到这一点，你也不需要行类。如果你只是想要一个边缘到边缘并且正确包装文本的全宽度div，那么你正在描述一个无格式的块元素，其中div是一个。

如何使标题适合整个页面

2 个答案: