1

Приветствую.

Имеется Bootstarp 4.0.0-alpha.2 и следующей HTML:

<ul class="list-inline">
    <li class="list-inline-item">One</li>
    <li class="list-inline-item">Two</li>
    <li class="list-inline-item">Three</li>
    <li class="list-inline-item">Four</li>
    <li class="list-inline-item">Five</li>
    <li class="list-inline-item">Six</li>
    <li class="list-inline-item">Seven</li>
    <li class="list-inline-item">Eight</li>
    <li class="list-inline-item">Nine</li>
    <li class="list-inline-item"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="">Dropdown</a></li>
</ul>

<br /><br />

<table class="table">
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
        <td>Seven</td>
        <td><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="">Dropdown</a></th>
    </tr>
</table>

Следующий CSS:

.dropdown-toggle {
    display: inline-block;
}

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: .25rem;
    margin-left: .25rem;
    vertical-align: middle;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

И следующая проблема:

Когда ссылка с классом "dropdown-toggle" находится в DIV-е, SPAN-е или в списке, то при изменении размера окна ссылка переносится целиком вместе с "dropdown-toggle::after".

Но когда такая ссылка находтся в таблице, то при изменение размера окна "dropdown-toggle::after" съезжает вниз.

Пример:

введите сюда описание изображения

Подскажите, пожалуйста, как сделать чтобы в таблице (TD) при изменении размера окна "dropdown-toggle::after" не съезжал вниз?

1 ответ 1

0

Проблема решается добавлением следующего класса:

.dropdown-table {
    white-space: nowrap;
}

Пример:

<table class="table">
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
        <td>Seven</td>
        <td><a class="dropdown-toggle dropdown-table" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="">Dropdown</a></th>
    </tr>
</table>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.