Разрыв правого меню после реагирования на небольшие устройства

ProgramBox

Разрыв правого меню после реагирования на небольшие устройства

Post author:admin
Запись опубликована:28 февраля, 2023
Post category:Вопросы по программированию

#html #css #twitter-bootstrap #menu

#HTML #css #twitter-bootstrap #меню

Вопрос:

после изменения размера моей загрузочной веб-страницы до небольших (при появлении 3 строк меню) устройств и нажатия кнопки меню правые пункты меню, по-видимому, отображаются в нижнем положении, как вы можете видеть это во фрагменте. Но есть ли возможный способ разместить это меню в более удобном месте?

 .navbar-fixed-top .navbar-nav.navbar-right {
  padding-top: 10px;
}

.navbar-default .navbar-nav li a:hover {
  color: #0295d5;
}

.navbar-fixed-top .navbar-nav.navbar-right li {
  padding-top: 4px;
} 
.navbar-fixed-top .navbar-nav.navbar-right .glyphicon {
  font-size: 24px;
}
.navbar-fixed-top .navbar-nav.navbar-right li {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.navbar-fixed-top .navbar-nav.navbar-right li:not(:first-child):before {
  content: " | ";
  margin-right: 10px;
}

.mail .badge.danger {
  color: #fff;
  background-color: #0185BF;
  border-color: #0183BC;
  padding-bottom: 5px;
  font-size: 10px;
  position: absolute;
  padding: 3px 5px;
  top: -4px;
  right: -8px;
}

.navbar-nav {
  padding: 10px;
}

.header_teacher {
  background-image: url(../img/header_02.png);
  height: 217px;
  margin-top: -22px;
  background-color: #038DC9;
}

.profile_picture {
  margin-top: 25px;
}

.description {
  text-align: left;
  position: absolute;
  float: none;
  margin-top: -125px;
  margin-left: 200px;
  color: #FFFFFF;
}

.attention {
  text-align: center;
}
.body_font {
	font-family: 'Lato', sans-serif;
}
.attention {
	align: left;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<title>Teacher control panel</title>
<div class="body_font">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">
        <div class="logo">
          <img src="img/logo.png" alt="Homepage">
        </div>
      </a>
    </div>


    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Find undervisning</a>
          <li><a href="#">Om os</a>
            <li><a href="#">Blog</a>
      </ul>
      <div class="divider">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <button type="button" class="btn btn-default">Support</button>
          </li>
          <li>
            <span class="glyphicon glyphicon-envelope mail" aria-hidden="true">
                           <span class="badge danger">5</span>
            </span>
          </li>
          <li>
            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true">
          	            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>



  <nav class="navbar navbar-inverse">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Elever</a></li>
        <li><a href="#">Kalendar</a></li>
        <li><a href="#">Undervisning</a></li>
        <li><a href="#">Beskeder</a></li>
        <li><a href="#">Min konto</a></li>
      </ul>
    </div>
  </nav>




  <div class="header_teacher">
    <div class="container">
      <div class="profile_picture">
        <img src="img/profile_picture.png">
      </div>
      <div class="description">
        <h1><strong>Mona Larsen</strong></h1>
        <p>Underviser hos musikundervisning.dk siden 1. august 2015</p>
      </div>
    </div>
  </div>
  <div class="attention" align="left">
    <p>Hej Mona, Godt at se dig igen - din næste undervisnigstime er: <a href="#"> 27. maj 2016 </a></p>
  </div>
  <div class="container">
  <div class="panel panel-default">
      <div class="panel-heading">Kommende undervisnings lektioner</div>
      <table width="80%" border="0" align="left" cellspacing="0" cellpadding="0">
        <tbody>
          <tr class="breadcrumb">
            <b><th width="15%" scope="col">Dato</th></b>
            <b><th width="15%" scope="col">Tidspunkt</th></b>
            <b><th width="15%" scope="col">Elev</th></b>
            <b><th width="35%" scope="col">Sted</th></b>
            <b><th width="20%" scope="col">Note</th></b>
          </tr>
          <tr>
            <td>13/08/16</td>
            <td>kl. 13.15</td>
            <td>Martins Dubrowski</td>
            <td>Graven 16b st. -8000 Aarhus C</td>
            <td><a href="#">Læs note</a></td>
          </tr>
          <tr>
            <td>15/03/15</td>
            <td>kl. 16.30</td>
            <td>Martins Dubrowski</td>
            <td>Graven 16b st.-8000 Aarhus C</td>
            <td>---</td>
          </tr>
          <tr>
            <td>16/12/14</td>
            <td>kl. 12.00</td>
            <td>Sonia Hald</td>
            <td>Graven</td>
            <td><a href="#">Læs note</a></td>
          </tr>
        </tbody>
      </table>
  </div>
       <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">Panel heading</div>
                    <!-- List group -->
                    <ul class="list-group">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ  </pre>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa                 
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa</pre>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <pre class="text-justify"> 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 

        </pre>
            </div>
        </div>
    </div>
</body>

1. Я не понимаю проблему / вопрос…

2. Попробуйте изменить размер окна, когда появится кнопка меню. Похоже, правильные пункты меню теперь находятся под главным меню. Как сделать так, чтобы мое правое меню отображалось на главной странице чуть ниже заголовка (где находится логотип и кнопка меню), а не в меню само по себе?

3. если я вас правильно понял, все, что вам нужно сделать, это изменить порядок вашего <div class="divider"> элемента с помощью вашего <ul class="nav navbar-nav"> элемента. Дайте мне знать, работает ли это для вас…

4. На самом деле ничего не меняется @Narxx . Правые пункты меню теперь отображаются только в строках, а не в столбцах, как мне нужно. Есть ли какой-либо способ сделать так, чтобы правая навигация шла ниже заголовка после сжатия браузера?

5. Должно быть, я вас не понял. Пожалуйста, приложите изображения текущего (плохого) состояния и макет состояния, которое вы хотите получить…

Ответ №1:

Я действительно надеюсь, что я правильно понял проблему.

Ваша проблема возникает из-за значения bootstrap по умолчанию:

 @media (min-width: 768px)
  .navbar-nav>li {
    float: left;
  }
}

Таким образом, каждый li элемент, который является прямым дочерним элементом .navbar-nav , будет иметь float: left средний размер экрана (минимальная ширина порта просмотра 768 пикселей).

Меньшие разрешения не получают этого свойства, и там для каждого li элемента занимает 100% ширины его контейнера, в результате чего у каждого элемента есть своя «строка».

Вы можете переопределить это, просто присвоив этим элементам pull-left класс (часть bootstrap), который заставит их всегда иметь float: left свойства.

Редактировать:

Более конкретно, измените этот код:

     <ul class="nav navbar-nav navbar-right">
      <li>
        <button type="button" class="btn btn-default">Support</button>
      </li>
      <li>
        <span class="glyphicon glyphicon-envelope mail" aria-hidden="true">
                       <span class="badge danger">5</span>
        </span>
      </li>
      <li>
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true">
                    </span>
      </li>
    </ul>

к этому:

     <ul class="nav navbar-nav navbar-right">
      <li class="pull-left">
        <button type="button" class="btn btn-default">Support</button>
      </li>
      <li class="pull-left">
        <span class="glyphicon glyphicon-envelope mail" aria-hidden="true">
                       <span class="badge danger">5</span>
        </span>
      </li>
      <li class="pull-left">
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true">
                    </span>
      </li>
    </ul>

1. Не могли бы вы добавить скрипку кода? Я пытаюсь это сделать, но, похоже, ничто не дает эффекта

2. Я играл с DOM в вашем примере. Я не стал копировать его в jsFiddle (если вы это сделаете, я могу отредактировать там и сохранить новую копию). Просто найдите элемент <ul class="nav navbar-nav navbar-right"> и добавьте к каждому из его <li> дочерних элементов атрибут: class="pull-left"