1. 首頁
  2. 問答
  3. 使用引導進行文本對齊

使用引導進行文本對齊

2017-06-02 69 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

我看到你的代碼，我可以看到不必要的標籤，因爲我無法看到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>

來源

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

這應該做什麼ü想在引導方面。如果你想改變文本的間距大小和顏色，然後使用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

相關問題

 相關問題