使用引导程序进行文本对齐

时间：2017-06-02 23:03:02

标签： html css twitter-bootstrap

为了理解引导程序而苦苦挣扎，我试图制作一个看起来像下面图片的标题并保持所有屏幕尺寸的标题，但是我似乎无法使用下面的代码获得结果，帮助

＆＃13;
＆＃13; 
.intro {
  top:20%;
  left:32%;
  color: black;
  font-weight: bold;
  font-size: 18px;

  hr {
    margin-left:0rem;
    width:80px;
  }
  h1 {
    color: green !important;
    margin-left: 10rem;
    font-weight: bold;
    font-size:42px;
    line-height: 1rem !important;
  }
  h3 {
    line-height:5rem !important;
    padding-bottom: 1rem;
    color: black;
    font-weight: bold;
    font-size: 115px;
  }
}
＆＃13; 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row intro">
  <div class="col-md-12">
    <div class="row">
      <h1 class="what">This is Text</h1>
    </div>
    <div class="row no-gutters">
      <div class="col-xs-12 col-xs-offset-1">
        <h1>this is more</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-1">
        <h3 style="float:left">BIGGER </h3>
      </div>
      <div class="col-lg-1">
        <h1>&nbsp?</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-5">
        <hr/>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

example

4 个答案:

答案 0 :(得分：1)

请用旧代码替换此代码。 我认为这对你有帮助吗？

＆＃13;
＆＃13; 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row intro">
    <div class="col-md-12">
      <div class="row">
        <div class="col-lg-6">
          <h1 class="what">This is Text</h1>
        </div>
      </div>
      <div class="row no-gutters">
        <div class="col-xs-12 col-xs-offset-1">
          <h1>this is more</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6">
          <h3>BIGGER&nbsp;<span>?</span></h3>
        </div>

      </div>

    </div>
  </div>
</div>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
  .intro {
    top: 20%;
    left: 32%;
    color: black;
    font-weight: bold;
    font-size: 18px;
  }

  h1 {
    color: green !important;
    font-weight: bold;
    font-size: 42px;
    line-height: 1rem !important;
  }

  h3 {
    padding-bottom: 1rem;
    color: black;
    font-weight: bold;
    font-size: 115px;
    position: relative;
    margin: 0;
    line-height: 1;
  }

  h3 span {
    font-size: .5em;
    display: inline-block;
    transform: translateY(-75%);
    line-height: 1;
  }

  h3:after {
    content: '';
    position: absolute;
    border-bottom: 6px solid black;
    bottom: 0;
    left: 30%;
    right: 0;
  }
</style>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我看到了您的代码，我可以看到不需要的代码，因为我无法在样式表中看到hr的开头标记和一些编辑。

CSS：

.intro {
top:20%;
left:32%;
color: black;
font-weight: bold;
font-size: 18px;
}
hr {
margin-left:0rem;
width:80px;
}
h1 {
color: green !important;
margin-left: 10rem;
font-weight: bold;
font-size:42px;
line-height: 1rem !important;
}
h3 {
line-height:5rem !important;
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
}

HTML：

 <div class="row intro">
  <div class="col-md-12">
  <div class="row">
  <h1 class="what">This is Text</h1>
  </div>
  <div class="row no-gutters">
  <div class="col-xs-12 col-xs-offset-1">
    <h1>this is more</h1>
  </div>
  </div>
<div class="row">
  <div class="col-lg-1">
    <h3 style="float:left">BIGGER </h3>
  </div>
  <div class="col-lg-1">
    <h1>&nbsp?</h1>
  </div>
</div>
<div class="row">
  <div class="col-xs-5">
  </div>
  </div>
 </div>
</div>

答案 2 :(得分：0)

请务必在引导后加载您的样式。稍微更改了h3，在一个范围内添加了?，并使用伪元素作为下划线。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
  .intro {
    top: 20%;
    left: 32%;
    color: black;
    font-weight: bold;
    font-size: 18px;
  }

  h1 {
    color: green !important;
    font-weight: bold;
    font-size: 42px;
    line-height: 1rem !important;
  }

  h3 {
    padding-bottom: 1rem;
    color: black;
    font-weight: bold;
    font-size: 115px;
    position: relative;
    margin: 0;
    line-height: 1;
  }

  h3 span {
    font-size: .5em;
    display: inline-block;
    transform: translateY(-75%);
    line-height: 1;
  }

  h3:after {
    content: '';
    position: absolute;
    border-bottom: 6px solid black;
    bottom: 0;
    left: 30%;
    right: 0;
  }
</style>
<div class="container">
  <div class="row intro">
    <div class="col-md-12">
      <div class="row">
        <div class="col-lg-6">
          <h1 class="what">This is Text</h1>
        </div>
      </div>
      <div class="row no-gutters">
        <div class="col-xs-12 col-xs-offset-1">
          <h1>this is more</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6">
          <h3>BIGGER&nbsp;<span>?</span></h3>
        </div>

      </div>

    </div>
  </div>
</div>

答案 3 :(得分：0)

这应该在bootstrap方面做你想要的。如果你想改变文本的间距大小和颜色然后使用CSS，但这种方式将使所有内容保持相同的跨浏览器

<html>

<head> 
    <title> C.E.O.
    </title>


    <link rel="stylesheet" type="text/css" href="stack.css" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrap.cdn.com/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>



<!-- Background image builder -->       
<div class="container">
    <div class="row">
        <div class="col-md-12">
                <h1 class="head" style="text-align:center;">  This is text  </h1> 
                <h1 class="head2" style="text-align:center;"> This is too </h1>
                <h3 class="subhead" style="text-align:center; font-size: 90px;">  BIGGER? </h3>
        </div>
    </div>
</div>




</body>
</html>
相关问题
最新问题