Блог

Я использую следующий код, чтобы поместить 3 кнопки рядом друг с другом, и это работает нормально, когда я использую его следующим образом, но проблема в том, что когда я медленно уменьшаю размер страницы браузера, кнопка detailes становится поверх кнопки delete, редактирование и удаление не меняются, как я могу сделать так, чтобы кнопка details была отзывчивой?

   @if (ViewBag.condition)
    {
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.ID }) |
        </td>
        <td style="position:relative; right: 60px ">@Html.ActionLink("Details", "Details", new { id = item.ID })</td>
    }
    else
    {
        <td>@Html.ActionLink("Details", "Details", new { id = item.ID })</td>
    }
  

Кода для работы не так много, и я мало что знаю о bootstrap. Но обычно на мобильных устройствах я устанавливаю отображение td на блокировку. Однако ваше объявление doctype может определить, будет ли это работать (я полагаю, вы должны быть в стандартном режиме). Попробуйте добавить это в свой CSS и / или медиа-запрос, если у вас есть к нему доступ:

 @media screen and (max-width: 480px){

    td{
         display: block; /* or inline-block */
    }

}
  

В качестве альтернативы вы могли бы протестировать встроенный стиль для своих элементов td, добавив:

 style="display:inline-block;"
  

Удачи!