Почему бы не изменить размер изображений? Bootstrap

Question

Я пытался реализовать этот простой пример

link

добавить к моему образу, класс img-responsive

Это мой код:

<div class="image"> 
    <img width="500" height="330" src="http://dgprint.dg-site.com/wp-content/uploads/2015/03/image-500x330.jpg" class="img-responsive" alt="image">       
</div> 

Смотреть этот пример просто не измените размер изображения ... хотя мне понравился пример.

Что-то не так с моим сайтом ... Я думаю. Загружается Bootrstrap.

link my site

Например, если добавить в логотип класс img-rounded работ, что означает, что загружена самозагрузка функция.

<div class="left"> 
    <a href="http://dgprint.dg-site.com/"> 
    <img class="img-rounded" src="http://web.eela.ro/dgprint/wp-content/uploads/2015/02/LOGO.png">  </a> 
</div> 

Я не понимаю, почему не изменяют размер изображений. Скажите, пожалуйста, где я не прав?

Заранее благодарен!

Answer 1

У вас есть все звонки на буксир?

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

ИЛИ Загрузили DIST

bootstrap/ 
├── css/ 
│ ├── bootstrap.css 
│ ├── bootstrap.css.map 
│ ├── bootstrap.min.css 
│ ├── bootstrap-theme.css 
│ ├── bootstrap-theme.css.map 
│ └── bootstrap-theme.min.css 
├── js/ 
│ ├── bootstrap.js 
│ └── bootstrap.min.js 
└── fonts/ 
    ├── glyphicons-halflings-regular.eot 
    ├── glyphicons-halflings-regular.svg 
    ├── glyphicons-halflings-regular.ttf 
    ├── glyphicons-halflings-regular.woff 
    └── glyphicons-halflings-regular.woff2 

Answer 2

У вас есть эта часть

.container { 
     width: 1080px; 
     margin: 0 auto; 
     position: relative; 
} 

Вы должны изменить его на 100% с запросом СМИ. Найдите точку прерывания и проверите свой css с помощью элемента in в Chrome или Firebug. Это просто css с фиксированной шириной.

Answer 3

Это позволит решить ваш проблемный

Вы установили свой CSS, как -

.container { 
    width: 1080px; 
} 

Modifiy это -

.container { 
    max-width: 1080px; 
} 

Изменение этого в каждом container классе. Это будет также изменить размер изображения

EDIT:

Ваш сайт не Bootstrap готов. Вы везде использовали неправильные классы. Советы:

• Один container класс достаточно для всего сайта.
• Все row должны быть вложены в container
• Все columns должны быть принудительно чадом row

Answer 4

Я видел ваш сайт http://dgprint.dg-site.com/ Вы не добавили IMG реагирующих класс еще. Также я видел, что вы не включили структуру уровня столбца, которую обеспечивает бутстрап.

имеют такого рода структуры (я взял этот код с вашего сайта )

<div class="container"> 
         <div class="row"> <div class="the-content col-md-6"> 
           <h1 class="title"> 
            <a href="http://dgprint.dg-site.com/?p=15" title="OUR EXPERIENCE"> 
             OUR EXPERIENCE         </a> 
           </h1> 
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 

                  </div><!-- the-content --> 
          <div class="image col-md-6"> 
           <img height="330" src="http://dgprint.dg-site.com/wp-content/uploads/2015/03/image-500x330.jpg" class="attachment-home-post wp-post-image img-responsive" alt="image">       </div> 
         </div></div>