Почему этот простой код начальной загрузки вызывает горизонтальную прокрутку?

Я новичок в начальной загрузки, я пытаюсь построить 3 колонки объект мультимедиа с ним, но мой код причина прокручивается по горизонтали:
это мой JS скрипку ссылка: http://jsfiddle.net/5ea98ytm/
и вот мой код:Почему этот простой код начальной загрузки вызывает горизонтальную прокрутку?

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap Example1</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 

<body> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="container"> 
       <div class="media"> 
        <div class="media-left"> 
         <a href="#"> 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
         </a> 
        </div> 
        <! MEDIA LEFT --> 
        <div class="media-body"> 
         <h4 class="media-heading">Media heading</h4> some texts 
        </div> 
        <! MEDIA BODY --> 
       </div> 
       <! MEDIA --> 

      </div> 
      <! CONTAINER --> 
     </div> 
     <! COL-MD-4 --> 
     <div class="col-md-4"> 
      <div class="container"> 
       <div class="media"> 
        <div class="media-left"> 
         <a href="#"> 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
         </a> 
        </div> 
        <! MEDIA LEFT --> 
        <div class="media-body"> 
         <h4 class="media-heading">Media heading</h4> some texts 
        </div> 
        <! MEDIA BODY --> 
       </div> 
       <! MEDIA --> 

      </div> 
      <! CONTAINER --> 
     </div> 
     <! COL-MD-4 --> 
     <div class="col-md-4"> 
      <div class="container"> 
       <div class="media"> 
        <div class="media-left"> 
         <a href="#"> 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
         </a> 
        </div> 
        <! MEDIA LEFT --> 
        <div class="media-body"> 
         <h4 class="media-heading">Media heading</h4> some texts 
        </div> 
        <! MEDIA BODY --> 
       </div> 
       <! MEDIA --> 

      </div> 
      <! CONTAINER --> 
     </div> 
     <! COL-MD-4 --> 
    </div> 
    </div> 
<! ROW --> 
</div> 
    <! C-F --> 
    <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 

</html>

Я просто пытаюсь создать 3 столбца медиа-объекта с col-md-4 Где я делаю это неправильно?

источник

2017-02-18 Jordan Bos

Я с трудом нашел скроллинг в скрипке вы упомянули. Поясните, что вы публикуете. Не совсем понял, что вам нужно! – Venky

нет проблем на небольших устройствах (это defualt show на скрипке), но если ваша ширина устройства больше 990 пикселей, вы видите горизонтальную прокрутку –

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      </head><body> 
 
      <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
      
 
       <div class="media"> 
 
        <div class="media-left"> 
 
         <a href="#"> 
 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
 
         </a> 
 
        </div> 
 
        <!-- MEDIA LEFT --> 
 
        <div class="media-body"> 
 
         <h4 class="media-heading">Media heading</h4> some texts 
 
        </div> 
 
        <!-- MEDIA BODY --> 
 
       </div> 
 
       <!-- MEDIA --> 
 

 
      
 
      <!-- CONTAINER --> 
 
     </div> 
 
     <!-- COL-MD-4 --> 
 
     <div class="col-md-4"> 
 
      
 
       <div class="media"> 
 
        <div class="media-left"> 
 
         <a href="#"> 
 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
 
         </a> 
 
        </div> 
 
        <!-- MEDIA LEFT --> 
 
        <div class="media-body"> 
 
         <h4 class="media-heading">Media heading</h4> some texts 
 
        </div> 
 
        <!-- MEDIA BODY --> 
 
       </div> 
 
       <!-- MEDIA --> 
 

 
      
 
      <!-- CONTAINER --> 
 
     </div> 
 
     <!-- COL-MD-4 --> 
 
     <div class="col-md-4"> 
 
     
 
       <div class="media"> 
 
        <div class="media-left"> 
 
         <a href="#"> 
 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
 
         </a> 
 
        </div> 
 
        <!-- MEDIA LEFT --> 
 
        <div class="media-body"> 
 
         <h4 class="media-heading">Media heading</h4> some texts 
 
        </div> 
 
        <!-- MEDIA BODY --> 
 
       </div> 
 
       <!-- MEDIA --> 
 

 
     
 
      <!-- CONTAINER --> 
 
     </div> 
 
     <!-- COL-MD-4 --> 
 
    </div> 
 
    </div> 
 
<!-- ROW --> 
 
</div> 
 
      </body> 
 
      </html>

Удалить <div class="container> из всех медиа-объектов. Это вызывает проблемы.

источник

2017-02-18 07:06:35 neophyte

спасибо, но почему контейнерный класс вызывает эту проблему? –

@JordanBos в качестве контейнера принимает ширину окна просмотра, т.е. ширину экрана устройства. – neophyte

Удалите все контейнеры над объектом класса мультимедиа. Bcoz занимает всю ширину страницы. В моей ширине pc: 1170px;

источник

2017-02-18 07:12:21

Вы получите это правильно в небольших размерах, потому что он принимает col-xs-12 и col-md-12. Поэтому требуется полная ширина строки. –

Если ваша проблема на большем экране, отображается горизонтальная прокрутка, а затем используется переполнение-x: скрыто в теге тела. См так:

<body style="overflow-x:hidden;"> 

/// all code stuffs 


</body>

источник

2017-02-18 07:25:51 KiranPurbey

Проблема с разрешением экрана .col-MD-4 будет работать для ноутбуков и настольных компьютеров, это не будет работать для небольших устройств, которые вы должны дать .col-SM- * (вместо * размера вы должны дать)

 <div class="col-md-4"></div> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"></div>

заменить это

 <div class="col-md-4 col-sm-4"> 
     <div class="col-md-4 col-sm-4"> 
     <div class="col-md-4 col-sm-4">

источник

2017-02-18 07:26:26

Почему этот простой код начальной загрузки вызывает горизонтальную прокрутку?

ответ

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