为什么图像有填充？

我试图将列挤成两个，而页面是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

非常感谢你:)这将有所帮助 –

为什么图像有填充？

回答

相关问题