Greetings.

There is Bootstarp 4.0.0-alpha.2 and the following 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>

Next 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; }

And the following problem:

When a link with the class "dropdown-toggle" is in DIV, SPAN, or in the list, then when the window is resized, the link is transferred entirely along with "dropdown-toggle :: after".

But when such a link is in the table, then when the window is resized, the "dropdown-toggle :: after" moves down.

Example:

enter image description here

Tell me, please, how to make the table (TD), when the window size "dropdown-toggle :: after" changes, not move down?

    1 answer 1

    The problem is solved by adding the following class:

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

    Example:

     <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>