Вопрос по bootstrap-4, css, responsive-design, twitter-bootstrap, html – контрольные точки

17

то я искал и ищу руководство в этом безрезультатно.

По сути, я просто хочу иметь боковую панель, но когда экран становится маленьким, то есть размером экрана смартфона, он превращается в панель навигации.

Мой HTML-код для боковой панели таков:

<nav class="col-sm-3 ">
  <div class="col-sm-12" id="fixed-sidebar">
    <!-- <a href="index.html"><img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"></a>  -->
    <ul>
      <li class="fuente-fjalla ul-personalizada">Animación</li>
      <li class="fuente-fjalla ul-personalizada">Ilustración</li>
      <li class="fuente-fjalla ul-personalizada">Interacción</li>
      <br>
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br>
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>

Мой CSS:

#fixed-sidebar {
    position: fixed;
    max-width: 20%;
    color: white;
}

Я понятия не имею, как получить это в navbar. Все, что я знаю, это как сделать навигационную панель с самого начала, но я этого не хочу! Я не хочу ничего из этого причудливого анимированного наложения, многоцветного аккордеона, чего угодно, пожалуйста.

Спасибо :)

@ Джонни, думаю, в этом нет необходимости; У меня нет ничего «отличного» от обычного CSS, чтобы сделать его отзывчивым (поскольку я не знаю). dawn
опубликуйте пожалуйста css Jonny
@CelticTree Добавлен простой CSS для # fixed-sidebar dawn
Я не уверен, если CSS@media собственность это то, что вы ищете или нет. Это позволяет отображать различные CSS в зависимости от размера экрана. Например, у вас может быть красный фон на экране с минимальной шириной 1080 и синий фон на экране с максимальной шириной 780. Но для дальнейшей помощи мне нужно, чтобы вы опубликовали свой код CSS. CelticTree

Ваш Ответ

4   ответа
28

етки. Один столбец для боковой панели и один для основного контента.

Bootstrap 4Переключатель боковой панели на верхнюю панель навигации на мобильном телефоне

<div class="container-fluid h-100">
    <div class="row h-100">
        <aside class="col-12 col-md-2 p-0 bg-dark">
            <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
                <div class="collapse navbar-collapse">
                    <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#">Link</a>
                        </li>
                        ..
                    </ul>
                </div>
            </nav>
        </aside>
        <main class="col">
            ..
        </main>
    </div>
</div>

Альтернативная боковая панель сверху
Исправлена ​​боковая панель сверху

Для обратногоНавбар, который становится боковой панелью), можно сделать какэтот пример

@Zim Я могу ошибаться в этом, но когда вы используете строки и столбцы начальной загрузки, вы не можете заставить боковую панель «залипать». Если вы хотите, чтобы боковая панель прокручивалась с основным контентом, то я считаю, что вы должны использовать теги div и делать немного больше настроек, к сожалению. Взгляните на этоbootstrapious.com/p/bootstrap-sidebar hescobar
Спасибо .. обертка не нужна Zim
Я не уверен, что ты имеешь в виду. Альтернативные и фиксированные примеры демонстрируют фиксированную боковую панель с сеткой. Zim
Привет, отличное решение. Где определяется обертка? Я не могу найти это в документации по bootstrap4 tbrittoborges
Отличное начало для решения. Я считаю, что ширина панели навигации по вертикали пропорциональна ширине браузера, а максимальная - по горизонтали пропорциональна высоте окна браузера. Есть ли способ избежать этого? Jeremy
1

Большой экран:

Маленький экран (мобильный)

если это то, что вы хотели, это кодhttps://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview

CSS + HTML + JQUERY:

    
    @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
    body {
      font-family: 'Poppins', sans-serif;
      background: #fafafa;
    }
    
    p {
      font-family: 'Poppins', sans-serif;
      font-size: 1.1em;
      font-weight: 300;
      line-height: 1.7em;
      color: #999;
    }
    
    a,
    a:hover,
    a:focus {
      color: inherit;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .navbar {
      padding: 15px 10px;
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 40px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-btn {
      box-shadow: none;
      outline: none !important;
      border: none;
    }
    
    .line {
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 40px 0;
    }
    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
    
    #sidebar {
      width: 250px;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 999;
      background: #7386D5;
      color: #fff !important;
      transition: all 0.3s;
    }
    
    #sidebar.active {
      margin-left: -250px;
    }
    
    #sidebar .sidebar-header {
      padding: 20px;
      background: #6d7fcc;
    }
    
    #sidebar ul.components {
      padding: 20px 0;
      border-bottom: 1px solid #47748b;
    }
    
    #sidebar ul p {
      color: #fff;
      padding: 10px;
    }
    
    #sidebar ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
      color:white;
    }
    
    #sidebar ul li a:hover {
      color: #7386D5;
      background: #fff;
    }
    
    #sidebar ul li.active>a,
    a[aria-expanded="true"] {
      color: #fff;
      background: #6d7fcc;
    }
    
    a[data-toggle="collapse"] {
      position: relative;
    }
    
    a[aria-expanded="false"]::before,
    a[aria-expanded="true"]::before {
      content: '\e259';
      display: block;
      position: absolute;
      right: 20px;
      font-family: 'Glyphicons Halflings';
      font-size: 0.6em;
    }
    
    a[aria-expanded="true"]::before {
      content: '\e260';
    }
    
    ul ul a {
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #6d7fcc;
    }
    
    ul.CTAs {
      padding: 20px;
    }
    
    ul.CTAs a {
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
    }
    
    a.download {
      background: #fff;
      color: #7386D5;
    }
    
    a.article,
    a.article:hover {
      background: #6d7fcc !important;
      color: #fff !important;
    }
    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
    
    #content {
      width: calc(100% - 250px);
      padding: 40px;
      min-height: 100vh;
      transition: all 0.3s;
      position: absolute;
      top: 0;
      right: 0;
    }
    
    #content.active {
      width: 100%;
    }
    /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
    
    @media (max-width: 768px) {
      #sidebar {
        margin-left: -250px;
      }
      #sidebar.active {
        margin-left: 0;
      }
      #content {
        width: 100%;
      }
      #content.active {
        width: calc(100% - 250px);
      }
      #sidebarCollapse span {
        display: none;
      }
    }
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Collapsible sidebar using Bootstrap 3</title>

  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style2.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">

</head>

<body>



  <div class="wrapper">
    <!-- Sidebar Holder -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>Header as you want </h3>
        </h3>
      </div>

      <ul class="list-unstyled components">
        <p>Dummy Heading</p>
        <li class="active">
          <a href="#menu">Animación</a>

        </li>
        <li>
          <a href="#menu">Ilustración</a>


        </li>
        <li>
          <a href="#menu">Interacción</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
        <li>
          <a href="#">Acerca</a>
        </li>
        <li>
          <a href="#">contacto</a>
        </li>


      </ul>


    </nav>

    <!-- Page Content Holder -->
    <div id="content">

      <nav class="navbar navbar-default">
        <div class="container-fluid">

          <div class="navbar-header">
            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>Toggle Sidebar</span>
                            </button>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Page</a></li>
            </ul>
          </div>
        </div>
      </nav>


    </div>
  </div>





  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <!-- Bootstrap Js CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- jQuery Custom Scroller CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {


      $('#sidebarCollapse').on('click', function() {
        $('#sidebar, #content').toggleClass('active');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
      });
    });
  </script>
</body>

</html>

если это то, что вы хотите.

он попросил Bootstrap 4, но это использует Bootstrap 3 и выглядит очень похожеbootstrapious.com/p/bootstrap-sidebar wilsjd
1
Вот одно из наших отзывчивых меню / боковых панелей, которое было сделано с помощью pushy. Вы в основном используете pusy в качестве начального шаблона и можете изменять его в соответствии со своими потребностями. Он работает с Bootstrap без проблем, и изображение ниже на самом деле основано на загрузочном сайте -i.imgur.com/1vtcwuf.gif Позор, что мой комментарий был отклонен несколько раз за попытку помочь кому-то. Этот негатив заставляет ТАК чувствовать себя как плохое место, пытаясь помочь другим :( MWD
Не волнуйся, мой друг. Это всегда полезно, но это место чертовски строгое, поэтому в нем есть качественная информация. Так держать! dawn
Более подробно, пожалуйста: ~) dawn
1

пожалуйста, дайте мне знать. Это работало нормально для меня.

Я спрятал боковую панель, а затем сделал панель навигацииконтрольные точки

@media screen and (max-width: 771px) {
    #fixed-sidebar {
        display: none;
    }
    #navbar-superior {
        display: block !important;
    }
}

Похожие вопросы