1. ホーム
  2. 質問と答え
  3. ブートストラップとのテキストアラインメントの作成

ブートストラップとのテキストアラインメントの作成

2017-06-02 12 views
0

ブートストラップを理解するのに苦労していますが、下の画像のように見えるヘッダーを作成しようとしていますが、次のコードを使用して結果を得ることはできません、 助けて？ブートストラップとのテキストアラインメントの作成

.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; 
 
    } 
 
}
<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>

example

出典

2017-06-02 John R

答えて

0

私はあなたのコードを見て、私はスタイルシートに時間の開始タグといくつかの編集を見ることができないですので、私は、不要なタグを見ることができます。

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>

出典

2017-06-02 23:23:56

+0

https://jsfiddle.net/rsha69yj/これをチェック –

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>

出典

2017-06-02 23:31:31

0

これは、uは、ブートストラップの面でやりたいはずです。あなたがテキストの間隔の大きさや色を変更したい場合は、あなたの古いコードでこのコードを交換してください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>

出典

2017-06-02 23:34:49 Chris

0

を維持します。 私はそれがあなたのために役立つと思いますか？

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

出典

2017-06-03 04:09:09

関連する問題

 関連する問題