如何標題圖片

html, body { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.nav { 
 
    margin:0px; 
 
} 
 

 
.navbar{ 
 
    margin-bottom:0px; 
 
} 
 

 
.header{ 
 
    margin:0px; 
 
    padding:0px; 
 
    display:block; 
 
    vertical-align:middle; 
 
    width:100%; 
 
}

<! doctype html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 
    <!-- Custom CSS --> 
 
    <link href="css.css" rel="stylesheet" type='text/css'> 
 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> 
 
    <!--font family--> 
 
    <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> 
 
    <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'> 
 
    </head> 
 
    <body > 
 
    <!--Navigation--> 
 
    <nav class="navbar navbar-inverse navbar-static-top"> 
 
     <div class="conatiner-fluid"> 
 
     <!--page scroll button for --> 
 
     <div class="navbar-header page-scroll"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> \t \t \t 
 
      </button> 
 
      <a class="navbar-brand page-scroll" href="#page-scroll">Website</a> 
 
     </div> \t <!--page scroll button--> 
 
     <div> 
 
      <div class="collapse navbar-collapse" id="#myNavbar"> 
 
      <ul class="nav navbar-nav navbar-right" id="#myNavbar"> 
 
       <li class="hidden"><a href="#page-top"></a></li> 
 
       <li class="page-scroll"><a href="#">Home</a></li> 
 
       <li class="page-scroll"><a href="#about">About</a></li> 
 
       <li class="page-scroll"><a href="#services">Services</a></li> 
 
       <li class="page-scroll"><a href="#contact">Contact</a></li> 
 
      </ul> 
 
      </div> <!--ul-li--> 
 
     </div> <!--navbar collapse--> 
 
     </div> <!--container-fluid--> 
 
    </nav> 
 
    <!--Navigation--> 
 
    <!--Header--> 
 
    <header > 
 
     <div class="container" > 
 
     <div class="row"> 
 
      <img src="work.jpg" class="img-responsive" > 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <!--Header--> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

我編碼我的第一個網站上有這麼不會消失標題圖片周圍的一些不必要的空格中擺脫額外的空間。

我檢查了所有常見的解決方案，如設置保證金和padding:0;display: block和width:100%但他們似乎並沒有工作。

有人請看看代碼，讓我知道我做錯了什麼？

來源

2016-03-16 Learner

更換

<div class="container"> to <div class="container-fluid">

，並給你的形象

width= 100%.

喜歡的東西：

<style> 
    .width_full { 
    width: 100%; 
    } 
</style> 

<div class="container-fluid"> 
    <div class="row"> 
    <img src="work.jpg" class="img-responsive width_full"> 
    </div> 
</div>

來源

2016-03-16 12:46:38 Razack2084

非常感謝！這對我有效。 – Learner

如何標題圖片

回答

相關問題