Проблемы с вкладками для контента с поддержкой CSS

Question

Не могли бы вы дать мне советы о том, как я могу сделать с CSS отзывчивые вкладки контента (или я не совсем уверен, как это называется). В основном идея заключается в том, что есть контейнер, внутри которого находится 3 вкладки. При нажатии на любую вкладку появляется соответствующее содержимое вкладки. На более широких экранах, например. > 768px видны вкладки. На меньших экранах (мобильные) вкладки отображаются как стрелки. Я не знаю, как это достичь. Здесь вы можете посмотреть на экраны.

Answer 1

Вы рассматривали возможность взглянуть на структуру Bootstrap? Он должен удовлетворять вашим потребностям.

Answer 2

Посмотрите на Material Design Lite Library: MDL Components - Tabs

Если вы не хотите взять целую библиотеку взглянуть на учебник от w3schools

Answer 3

используется @media (макс-ширина: 1280px), чтобы проверить отзывчивость Вы можете просмотреть ссылку: http://sass-lang.com/

@media (max-width: 1280px) { 
    .wrap-text{ 
      width:100%; 
      float:left; 
     } 
     .wrap-arrow{ 
      display:none; 
     } 
} 
@media (max-width: 768px) { 
    .wrap-text{ 
      width:50%; 
      float:left; 
     } 
     .wrap-arrow{ 
      display:block; 
     } 
}