Изображения перекрываются, когда я использую bootstrap, который я не хочу

-1

Этот код является частью веб-сайта, который я делаю, и этот раздел хранит перекрывающиеся изображения. Как это исправить?Изображения перекрываются, когда я использую bootstrap, который я не хочу

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<div class="container-fluid" style="background-color:white; height:700px;"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <img src="images/team/app2.jpg" style="height:180px;width:180px;"> 
     </div> 
     <div class="col-md-6"> 
      <img src="images/team/website.png" style="height:180px;width:180px;"> 
     </div> 
     <div class="col-md-4"> 
      <img src="images/team/designer1.jpg" style="height:180px;width:180px;"> 
     </div> 
     <div class="col-md-4"> 
      <img src="images/team/content.png" style="height:180px;width:180px;"> 
     </div> 
     <div class="col-md-4"> 
      <img src="images/team/marketing2.jpg" style="height:180px;width:180px;"> 
     </div> 
    </div> 
</div>

Изображение одного и того же:

источник

2016-08-21 Vipanchi

это лучше, если вы создаете jsfiddle на вопрос –

Ваш код работает г ритайте в скрипке. – JazZ

Да. Переопределить значения. Просто заметил. Благодаря! – Vipanchi

Потому что вы установили изображение, чтобы всегда быть 180x180, если ширина будет меньше, чем 540 (+ некоторые поля), они будут перекрывать друг друга. Вы можете отключить его, установив overflow: hidden; на каждый столбец. Но в вашем случае это не должно появляться, поскольку вы используете столбцы md.

Так что, я думаю, ваша проблема в том, что у вас слишком много столбцов. Там должна быть следующая строка каждый раз, когда вы превысите строки ограничение столбца в начальной загрузки по умолчанию является 12.

<div class="container-fluid" style="background-color:white; height:700px;"> 
<div class="row"> 
    <div class="col-md-6"> 
     <img src="images/team/app2.jpg" style="height:180px;width:180px;"> 
    </div> 
    <div class="col-md-6"> 
     <img src="images/team/website.png" style="height:180px;width:180px;"> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    <img src="images/team/designer1.jpg" style="height:180px;width:180px;"> 
    </div> 
    <div class="col-md-4"> 
     <img src="images/team/content.png" style="height:180px;width:180px;"> 
    </div> 
    <div class="col-md-4"> 
     <img src="images/team/marketing2.jpg" style="height:180px;width:180px;"> 
    </div> 
</div> 
</div>

источник

2016-08-21 17:52:42 pr0gramist

Когда я использовал код, все изображения находятся в одной строке с перекрытием. Когда я использовал overfow: скрытый, отображается только половина изображения вместе с перекрытием. Должен ли я изменить размер? увеличить его или уменьшить? – Vipanchi

, даже когда я увеличиваю размер до 600x600, он все еще перекрывается – Vipanchi

Проблема в вашем CSS или что-то еще. Убедитесь, что вы переопределяете значения значений начальной загрузки. Этот код с только бутстрапом работает абсолютно нормально. – pr0gramist

Убедитесь, что ваш CSS изображений является position: static;

Если вы хотите их в линию с одной и другой стороны, добавить: display: inline-block; или если вы хотите только вниз: display: block;

См позиционирования: https://developer.mozilla.org/en-US/docs/Web/CSS/position

источник

2016-08-24 09:05:08 Mechetle

Изображения перекрываются, когда я использую bootstrap, который я не хочу

ответ

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