2017-01-23 9 views
-2

Bootstrap 3 корзины определяются с помощью начальной загрузки стандартной разметки какКак отключить горизонтальный отвод, если содержимое подходит для экрана мобильного

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
<body>  
    <div class="container"> 
     <div id="_info"></div> 

     <header class="row"> 
      <div class="col-xs-12"> 
    </header> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">L&#252;li navigeerimist</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li> 

     .... 

В мобильной ширине содержания такой же, как мобильные ширины экрана.

Однако пользователь может перетаскивать содержимое по горизонтали влево, так что уродливое белое пространство появляется слева.

Как исправить это, чтобы невозмутимое левое перетаскивание не разрешено? Возможно, какой-то элемент на странице вызывает этот эффект?

Я попытался удалить элементы в инструментах разработчика Chrome. Вкладка «Элементы», но горизонтальная прокрутка по-прежнему разрешена.

+0

И вот в чем проблема: http://i.imgur.com/m6f3bRW.png –

+0

На некоторых страницах требуется горизонтальная прокрутка, поэтому она не может быть отключена всегда. Я ожидаю, что он будет автоматически отключен браузером, если это не требуется. Широкий элемент в показанном изображении создается, вероятно, скриптом facebook. Как заставить facebook создать правильную ширину? – Andrus

ответ

1

Проблема заключается в том, что ваш верхний и нижний колонтитулы имеют жесткую ширину набора. Это, как правило, не является проблемой с запросами собственно СМИ, но на мой взгляд, для того, чтобы не придется беспокоиться о добавлении больше медиазапросы я бы просто изменить CSS для заголовка, как я ниже:

@media only all and (min-width: 481px) 
    header, .wrap { 
     width: 100%; 
     margin: 0 auto; 
    } 

для нижний колонтитул, у вас есть панель инструментов facebook, в которой много встроенной ширины. Вы можете взломать это вместе, обернув весь элемент в div и применив width: 100%; overflow: hidden; к этому div, но я настоятельно рекомендую вам сделать больше исследований по этому плагину, чтобы заставить его функционировать должным образом или найти лучший плагин, который даст вам лучшие результаты.

+0

Спасибо. Insted of width: 100% Я удалил ширину из стиля, как описано в ответе Valius79. Это нормально ? – Andrus

0

Это сделало это на моем компьютере. Я просто отключил заданную ширину заголовка.

 Смежные вопросы

  • Нет связанных вопросов^_^