Question

我正在尝试将列压缩为两个，而页面是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>

Answer 1

Afsan Abdulali Gujarati ，我认为根据我的理解，您希望xs视图菜单文本全部保留在一条垂直线的右侧。
停止文本环绕图像。响应的图像是col-xs-6的全宽。但看起来你正在尝试或意味着让图像与右侧文本链接的高度相同希望现在排队的方式还可以。

看一下 Fiddle 。

我在这里所做的只是将padding-bottom:200px;添加到li保存图像看看这是否符合您的要求。

.keepclear{
    padding-bottom:200px;
}

<强>加
要删除导航栏中图像周围的任何填充，请将其添加到自定义css以覆盖Bootstrap css类。

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

为什么图像有填充？

1 个答案: