Сделать раскрывающееся меню Элемент всегда имеет тот же размер, что и его родительский элемент? (Bootstrap & CSS)

У меня есть панель навигации с выпадающим меню (при наведении). Я хотел бы, чтобы выпадающие пункты меню имели тот же размер, что и родительский.Сделать раскрывающееся меню Элемент всегда имеет тот же размер, что и его родительский элемент? (Bootstrap & CSS)

Вот картина:

Так что я бы сейчас, как «One» & «Два», чтобы иметь точно такой же размер, как «Это выпадающий» (по крайней мере, с точки зрения ширины). Сейчас они немного большие. Когда я изменяю размер окна, родительский элемент («Это выпадающий список») меняет размер, а «Один» & «Два» должен затем соответствующим образом изменять размер.

Код

У меня есть Navbar с различными элементами, которые в основном структурированы следующим образом:

<div class="container-fluid nopadding navbar"> <!-- NAVBAR --> 
    <div class="row"> 

    <div class="container-fluid col-xs-12 col-sm-12 col-md-10"> <!-- MENU --> 
     <div class="row"> 

     <div class="dropdown col-xs-12 col-sm-2"> 
      <div class="container-fluid"> 
      <div class="row"> 
       <button class="dropbtn col-xs-12">This is a dropdown</button> 
       <div class="dropdown-content col-xs-12 nopadding"> 
       <a href="#">One</a> 
       <a href="#">Two</a> 
       </div> 
      </div> 
      </div> 
     </div> 
...more navbar elements follow here 

    </div> 
    </div> 

    </div> 
</div>

Вот некоторые из CSS:

/* Dropdown Button */ 
.dropbtn { 
    background-color: #F6F8FB; 
    border: none; 
    cursor: pointer; 
    font-family: AlegreyaSansSC-Light; 
    font-size: 16px; 
    color: #637F92; 
    letter-spacing: 0.52px; 
    height: 81px; 
} 
/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 
/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #F6F8FB; 

    z-index: 1; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover { 
    background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */ 
    background: rgba(221, 232, 241, 0.95); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
    padding: 30px; 
    text-align: center; 
    text-decoration: none; 
    display: block; 
} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
    display: block; 
    top: 81px; 
    position: absolute; 
}

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

источник

2017-02-14 George Welder

Вы можете сделать раскрывающееся содержание шириной: 100%, если вы сделаете его относительным положением родителя. Затем убедитесь, что элемент не шире, чем это, поэтому удалите его прописью – Mart

Спасибо. Каким будет родительский элемент? Я бы предположил 'dropbtn' или может быть только непосредственным родителем? (в этом случае тогда класс bootstrap 'row'?) –

Вы должны удалить padding из .dropdown-content a элемента:

.dropdown-content a { 
    /*padding: 30px;*/ 
    text-align: center; 
    text-decoration: none; 
    display: block; 
}

источник

2017-02-14 16:14:50 Dekel

, но тогда у меня нет нулей в моих раскрывающихся меню (все сжимается вместе). Он также все еще больше (шире), чем его родитель. –

У вас, вероятно, есть пробелы/поля из других стилей в вашем CSS. Используйте панель инструментов разработчиков, чтобы проверить, почему вы ее получили, и устраните необходимость. – Dekel

Попробуйте добавить width: 100%; в вашем .dropbtn и .dropdown:hover .dropdown-content. Это должно установить все элементы в родительскую ширину.

источник

2017-02-14 16:20:01

Сделать раскрывающееся меню Элемент всегда имеет тот же размер, что и его родительский элемент? (Bootstrap & CSS)

ответ

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