Меню Popover и Bootstrap (он не отображается с правой шириной)

Question

Я пытаюсь разработать панель для всплывающего меню, когда вы находитесь над ссылкой в ​​навигационной панели загрузки. У меня есть несколько проблем для достижения правильной ширины.

HTML

<nav class="navbar navbar-default navbar-lower"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 

       </button> 


      </div><!-- navbar-header --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> 

       <ul class="nav navbar-nav"> 
        <a href="#" class="pull-left" style="margin-right: 10px;"> 
        <img id="logo" src="assets/img/sendingparcel/logo.png" ></img> 
        </a> 
             <li class="active"> 
         <a href="#"> 
          Home 
          <span class="sr-only"> 
           (current) 
          </span> 
         </a> 
        </li> 
        <li class="menu"> 
         <a href="#"> 
          Sturen 
         </a> 


        </li> 
        <li> 
         <a href="#"> 
          Ontvangen 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          Zakelijke oplossingen 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          Klandentiest 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          E-Shop 
         </a> 
        </li> 

       </ul> 
       {% include popmenu.html %} 



      </div> <!-- collapse navbar-collapse --> 


     </div> 
    </nav><!-- end navbar navbar-default --> 

popmenu код выглядит следующим образом:

<div class="popover"> 
    <div class="row" style="display: none;"> 
     <div class="col-md-12 "> 

       <div class="row"> 
        <div class="col-md-3"> 
         <span class="titlel3">Zakelijk pakjes sturen</span> 
         <hr> 
         <em>Wat kan ik versturen?<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Onze oplossingen<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br><br> 
         <ul> 
          <li> 
           Nationaal 
          </li> 
          <li> 
           Internationaal 
          </li> 
          <li> 
           Sprintlevering 
          </li> 
          <li> 
           Retour 
          </li> 
          <li> 
           Fullfillment 
          </li> 
         </ul> 
        </div> 
        <div class="col-md-4"> 
         <span class="titlel3">Retouroplossingen</span> 
         <hr> 
         <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <br><br> 
         <span class="titlel3">Voor webshops</span> 
         <hr> 
         <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 


        </div> 
        <div class="col-md-3"> 
         <span class="titlel3">Mail sturen</span> 
         <hr> 
         <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <br><br> 
         <span class="titlel3">Ontvangen</span> 
         <hr> 
         <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 

        </div> 

        <div class="col-md-3"> 
         <span class="titlel3">Mail sturen</span> 
         <hr> 
         <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <br><br> 
         <span class="titlel3">Ontvangen</span> 
         <hr> 
         <em>Lorem<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Ipsum<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 
         <em>Dolor<span class="glyphicon glyphicon-menu-right" style="font-size:11px;"></span></em><br> 

        </div> 

       </div><!-- row --> 

      </div> 
     </div> 
</div> 

И это стиль:

.popover{ 
    max-width: 100%; 
    top: 40px; 
    left: 0px; 
    position:absolute; 
    display:none; 
    border: 2px solid red; 
    padding-bottom: 2%; 
} 

Это моя последняя попытка, но в любом случае я могу Не понимаю, почему ширина ограничена.

Answer 1

.col-md-3 в начальной загрузке имеет определенную ширину, вы только overiding в max-width

Попробуйте добавить width: auto; к вашему CSS:

.col-md-3.popover { 
    width: auto; 
    max-width: 100%; 
    top: 40px; 
    left: -28px; 
    position:absolute; 
    display:none; 
    border: 2px solid red; 
}