2016-08-07 6 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

あなたは.pagetwoブロックに.container.rowクラスをラップする必要があります。

<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'でラップするとき、水平スクロールバーを持っているためです。これらの負のマージンを排除するには、 '.row'要素を' .container'にラップする必要があります。 – 1ven

+0

有用であれば、回答を受け入れたものとしてマークしてください:) – 1ven

関連する問題