爲什麼圖像有填充？

我試圖將列擠成兩個，而頁面是xs大小。我做了必要的邏輯，並試圖通過使用img來實現。但是，在使用圖像時，我無法強制圖像佔用塊的全部大小。我已經嘗試了所有必要的CSS編輯和東西，也許我錯過了一些東西，請幫忙。接受jsfiddle鏈接的幫助以更好地理解它。我已經包含在小提琴文件中的css Js Link！爲什麼圖像有填充？

<html> 
<style> 




</style> 
<body> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid "> 



      <div class="navbar-header "> 
       <button type="button" class="navbar-toggle pull-left " data-toggle="collapse" data-target="#myNavbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>       
        </button> 



      <form class="navbar-form pull-left my-searchmain" role="search"> 
       <div class="input-group "> 
        <input type="text" class="form-control " placeholder="Search"> 
        <div class="input-group-btn"> 
         <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
        </div> 
       </div> 
      </form> 




     </div> 




    <div class="collapse navbar-collapse " id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right col-lg-12 col-md-12 col-sm-12"> 
     <li class="active col-lg-1 col-xs-6 col-md-1 col-sm-1"><a href="#"><img id="imgnew" src="http://www.affordable-templates123.com/wp-content/uploads/2015/05/fancy-label-templates-nh8tgtgq.jpg" ></a></li> 
     <li class="dropdown col-lg-1 col-xs-6 col-md-1 col-sm-1"> 
      <a class="dropdown-toggle " data-toggle="dropdown" href="#">Page 2 </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
      </ul> 
     </li> 
     <li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1"><a href="#">Page 3</a></li> 
     <li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1"><a href="#">Page 4</a></li> 
     <li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1"><a href="#">Page 5</a></li> 
     <li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1"><a href="#">Page 6</a></li> 
     <li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1"><a href="#">Page 7</a></li> 
     <li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1"><a href="#">Page 8</a></li> 
     <li class="col-xs-push-1"> 
       <form class="navbar-form my-search " role="search"> 
       <div class="input-group "> 
        <input type="text" class="form-control " placeholder="Search"> 
        <div class="input-group-btn"> 
         <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
        </div> 
       </div> 
      </form> 
     </li> 
     </ul> 

    </div> 
    </div> 
</nav> 
</body> 
</html>

來源

2015-06-12 Afsan Abdulali Gujarati

Afsan Abdulali古吉拉特，我認爲我的理解在這裏，你想要的XS查看菜單文本都留在一條垂直線的權利。
停止圖像下方的文字環繞。正在響應的圖像是col-xs-6的全寬。但它看起來像你試圖或意味着在右側的文字鏈接高度相同的圖像。
希望現在排隊的方式可以。

看一看這個Fiddle。

我在這裏所做的只是添加padding-bottom:200px;li tht擁有圖像。
看看這是否你想要的。

.keepclear{ 
    padding-bottom:200px; 
}

新增
要刪除任何填充圍繞一個圖像中的導航欄添加到您的自定義CSS重寫引導CSS類。

.navbar-nav > li > a { 
    padding-top: 0; 
    padding-bottom: 0; 
    padding-left:0; 
    padding-right:0; 
}

來源

2015-06-13 02:16:17 AngularJR

哦，不，也許我解釋不正確，但沒有問題的模式或任何東西。現在有一個文本，但最終我會用圖像（page1，page2，page3 ..等）替換它們。關心的是關於圖像周圍的填充。如果你看圖像，你會看到一個灰色的填充，我想擺脫這一點，並強制圖像佔據大屏幕和移動屏幕的整個區域。我希望我已經解釋正確。感謝您的答覆。 –

我在上面的帖子中添加了一個更新，它將刪除圖像周圍的任何填充。 – AngularJR

非常感謝你:)這將有所幫助 –

爲什麼圖像有填充？

回答

相關問題