2016-08-07 74 views
-1

所以,我試圖創建我的投資組合。我添加了一個額外的按鈕來下載簡歷,整個事情變得沒有反應,即使我刪除了恢復按鈕,它仍然沒有響應。我不知道問題出在哪裏。我試着改變大部分參數。如何讓我的html文件再次響應?

.nav-pills{ 
 
    
 
    font-size: 2.2em; 
 
    background-color:black; 
 
    margin-bottom: 16%; 
 
} 
 
body{ 
 
\t background-color: none; 
 
\t font-family: Lobster; 
 
\t color: white; 
 
    position: relative; 
 

 
} 
 
.pageone{ 
 
\t background: url("https://hd.unsplash.com/photo-1419242902214-272b3f66ee7a"); 
 
\t background-size: cover; 
 
\t height: 700px; 
 
\t border-top: 4%; 
 

 
} 
 
.container-fluid{ 
 
\t margin-left: auto; 
 
\t margin-right:auto; 
 

 

 
} 
 
h1{ 
 
\t padding: 0px; 
 
\t margin-top:0px; 
 
\t font-size: 6em; 
 
} 
 
.btn-default{ 
 
\t background: black; 
 
\t border-color: black; 
 
\t color: #337aa9; 
 
\t font-size: 1.4em; 
 

 
} 
 
.boxone{ 
 
\t background-color: black; 
 
\t opacity: 0.8; 
 
\t width: 50%; 
 
\t margin-right: auto; 
 
\t margin-left: auto 
 
} 
 

 
.pagetwo{ 
 
\t background: url("https://hd.unsplash.com/photo-1465101046530-73398c7f28ca"); 
 
\t background-size: cover; 
 
\t height: 680px; 
 
\t 
 
\t padding-top: 5% 
 
} 
 
p{ 
 
\t font-size: 2.0em; 
 
} 
 
.dp{ 
 
\t padding: 16%; 
 
\t border-radius: 50% 
 
}
<html> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lobster" /> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
<Head> 
 
<title>Puneeth</title> 
 
</Head> 
 

 
<div class="pageone text-center"> 
 
<div class="container-fluid"> 
 
<ul class="nav nav-pills"> 
 
<li><a href="#">Puneeth S</a></li> 
 
<li class="pull-right"><a href="#">Contact</a></li> 
 
<li class="pull-right"><a href="#">Portfolio</a></li> 
 
<li class="pull-right"><a href="#">About</a></li> 
 
<li class="pull-right"><a href="#">Home</a></li> 
 
</ul> 
 
</div> 
 

 

 
<div class="boxone "> 
 
<h1>Puneeth S</h1> 
 
<h3>Engineer by chance, Developer by choice</h3> 
 
</div> 
 
<div class="btn-list text-center"> 
 
<a class="btn btn-default" href="#">Resume</a> 
 
<a class="btn btn-default" href="#">Facebook</a> 
 
<a class="btn btn-default" href="#">Twitter</a> 
 
<a class="btn btn-default" href="#">Linkedin</a> 
 
<a class="btn btn-default" href="#">Github</a> 
 
</div> 
 
</div> 
 

 
<div class="pagetwo"> 
 
<div class="row"> 
 
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"> 
 
<img src="https://s20.postimg.org/uguojmpvx/abcd.jpg" alt="trial" class="dp"> 
 

 

 
</div> 
 
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"> 
 
<h1 class="text-center">Puneeth S</h1> 
 
<p class="text-center">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 

 

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

回答

1

你應該包裝在.container.row.pagetwo塊:

<div class="pagetwo"> 
    <!-- `.container` element eliminates negative horizontal margins from `.row` --> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"> 
     <img src="https://s20.postimg.org/uguojmpvx/abcd.jpg" alt="trial" class="dp"> 
     </div> 
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12"> 
     <h1 class="text-center">Puneeth S</h1> 
     <p class="text-center">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
     </div> 
    </div> 
    </div> 
</div> 
+1

由於一噸。它的工作...:D 如果你不介意,你能解釋一下邏輯。我無法弄清楚爲什麼這有效。 – puneeth8994

+0

因爲'.row'元素會向內部元素添加負向水平邊距。這是因爲在將元素包含在'.row'中時,你有水平滾動條。爲了消除這些負邊距,你應該在'.container'中包裝'.row'元素。 – 1ven

+0

請將答案標記爲已接受,如果它們有用:) – 1ven