Html 如何使标题适合整个页面_Html_Css_Twitter Bootstrap

Html 如何使标题适合整个页面

html css twitter-bootstrap

Html 如何使标题适合整个页面,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在努力使这个标题适合整个页面。出于某种原因，文本周围有一个填充，不允许我调整它。我将列的填充（引导）设置为0，但这似乎没有帮助。当我增加字体大小>230px时，它就会进入第二行。有人能帮我吗这是一张图片：。蓝色区域如何不捕捉到屏幕的末端 CSS: 身体{ 背景色：黑色；边际：0px；填充：0px； } div{ 边际：0px；填充：0px； } .标题{ 颜色：白色；字体系列：“Helveticaneulight”、“HelveticaNeue Light”、“Helvetica

我正在努力使这个标题适合整个页面。出于某种原因，文本周围有一个填充，不允许我调整它。我将列的填充（引导）设置为0，但这似乎没有帮助。当我增加字体大小>230px时，它就会进入第二行。有人能帮我吗

这是一张图片：。蓝色区域如何不捕捉到屏幕的末端

CSS:


身体{
背景色：黑色；
边际：0px；
填充：0px；
}
div{
边际：0px；
填充：0px；
}
.标题{
颜色：白色；
字体系列：“Helveticaneulight”、“HelveticaNeue Light”、“Helvetica Neue Light”、“Helvetica Neue”、“Helvetica Neue”、“TeXGyreHerosRegular”、“Helvetica”、“Tahoma”、“日内瓦”、“Arial”；
}
.盒子{
背景色：浅绿色；
}
#标题栏{
字体大小：正常；
字号：232px；
文本对齐：左对齐；
左边距：-29px；
利润上限：-76px；
}
.行无填充{
[类别*=“列-”]{
左侧填充：0！重要；
右边填充：0！重要；
}
}

HTML:


让我们创建

因为

列xs-*

包括

浮动：左

每

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

话虽如此，您也不需要row类。如果您只是想让一个全宽div边到边并正确包装文本，那么您描述的是一个未设置样式的块元素，div就是其中之一。

您只需要删除

左边距：-29px来自#标题栏
。例如：

正文{
背景色：黑色；
边际：0px；
填充：0px；
}
div{
边际：0px；
填充：0px；
}
.标题{
颜色：白色；
字体系列：“Helveticaneulight”、“HelveticaNeue Light”、“Helvetica Neue Light”、“Helvetica Neue”、“Helvetica Neue”、“TeXGyreHerosRegular”、“Helvetica”、“Tahoma”、“日内瓦”、“Arial”；
}
.盒子{
背景色：浅绿色；
}
#标题栏{
字体大小：正常；
字号：232px；
文本对齐：左对齐；
左边距：-29px；
利润上限：-76px；
}
.行无填充{
[类别*=“列-”]{
左侧填充：0！重要；
右边填充：0！重要；
}
}

让我们创建
删除列-*
不是引导应该如何工作的。此外，OP已经把它放在一个全屏幕宽的流体容器中。有效点。OP也不需要行。如果您正试图创建一个包含div的全宽div，则只需创建一个未设置样式的div。默认情况下，block元素会执行所要求的操作。谢谢您的回复。删除左边距只会将标题向右移动，但不会将其扩展到整个页面。我想得到这样的效果。不过，该链接使用的是图像。将图像缩放到窗口宽度非常简单（宽度：100%）是的，这是可以接受的，也是最后的选择。但是我想我应该能够使用css和常规文本来获得这种效果。缩放文本并不总是一个好主意。很难使字体与宽度完全匹配。谢谢David。我以艰苦的方式吸取了教训。花了4个多小时尝试缩放文本。我刚刚从草图中导出了这些图像资源，并设置了它们的缩放比例。现在它就像一个符咒。
 <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>

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