Почему у изображения есть это дополнение?

Я пытаюсь сжать столбцы на две части, а страница - размер 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 Абдулали Гуджаратский, я думаю, что я понимаю здесь, вы хотите хз посмотреть текст меню для всех остаться на праве в одной вертикальной линии.
Чтобы остановить обтекание текста ниже изображения. Ответное изображение - это полная ширина 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

Ох, Нет. Возможно, я объяснил это неправильно, но проблем с шаблоном или чем-либо еще нет. Прямо сейчас есть текст, но в конце концов я заменю их изображениями (страница1, стр. 2, стр. 3 и т. Д.). Озабоченность касается прокладки вокруг изображения. Если вы посмотрите на изображение, вы увидите серое заполнение, я хочу избавиться от него и заставить изображение занять всю область как на большом экране, так и на мобильном экране. Надеюсь, я правильно объяснил это. Спасибо за ответ. –

Я добавил обновление к своему сообщению выше, которое удалит любые прокладки вокруг изображения. – AngularJR

Большое вам спасибо :) Это поможет –

Почему у изображения есть это дополнение?

ответ

Смежные вопросы