Problem mit Überlauf

Question

Hier ist das Problem. Ich habe eine HTML-Seite mit einer Liste, die wie folgt aussieht:

Es ist eine Liste mit Elementen von einem div (linke Seite) und einem ul der Schaltflächen (rechte Seite) gebildet. Hier ist der zusammengefasste Code:

%li.rutinas-li{style: "overflow:visible"} 
    %div{ style: "display: inline-block;" } 
     = link_to ... 
      ... 
      %br 
      %p ... 
     %br 
     %span 
      = ... 
      .thumbs-container 
       =link_to ... 
        = icon('thumbs-up', ...) 
       %strong ... 
      .thumbs-container 
       =link_to ... 
        = icon('thumbs-down', ...) 
       %strong ... 
      .thumbs-container 
       =link_to ... 
        = icon('star', ...) 
    %ul.pull-right.without-bullets.no-padding 
     %li.inline-block= link_to ... 
     %li.inline-block= link_to ... 
     %li.inline-block= link_to ... 
     %li.inline-block.dropdown 
      %a.dropdown-toggle{"data-toggle": "dropdown", type: "button"} 
       = icon('share-alt', ...) 
      %ul.dropdown-menu{style: "min-width:0"} 
       %li{style: "padding: 15px"} 
        = link_to ... 
         = icon('envelope', ...} 
       %li{style: "padding: 15px"} 
        = link_to ... 
         = icon('twitter', ...") 
       %li{style: "padding: 15px;"} 
         = link_to ... 
          = icon('facebook', ...) 

Ich brauche die Linie 1 {style: "overflow:visible"}, weil das letzte ul ein Drop-Down ist, die wie folgt aussieht: Und wenn ich es entfernen Sie die Dropdown abgeschnitten wird. Doch diese CSS-Eigenschaft bewirkt auch, dass, wenn der Bildschirm kleiner ist (ein Mobiltelefon, zum Beispiel), wird die Liste wie folgt angezeigt: Und ich würde es so statt wie: Da der Überlauf erlaubt ist, Die Liste der Schaltflächen auf der rechten Seite ist überfüllt die Eltern und seine weißen Trennzeichen, es ist irgendwie hässlich. Aber wenn ich {style: "overflow:visible"} entferne das Dropdown wird nicht sichtbar, wenn ich darauf klicke

Answer 1

Ihr Problem ist nur die Breite und Höhe Ihrer Elemente, müssen Sie es ändern, wenn das Gerät kleiner ist.

Denken reagieren! Eine großartige Lösung wäre, eine Medienabfrage zu erstellen und Ihre Schaltflächen unter Ihrem Text zu platzieren.

Wenn Sie nicht möchten, dass Ihr "li" eine zu große Höhe hat, können Sie Ihren Text auch anders platzieren, damit er auch die volle Breite annehmen kann.