2015-08-20 5 views
0

У меня есть следующий код. Я хочу изменить размер изображения, но он не работает с col-xs-offset-0. (Хочу сосредоточить его)Bootstrap col-xs-offset-0 не работает

В чем проблема? Я хочу, чтобы мой образ стал большим с col-xs и центрированным.

Я не хочу использовать col-xs-4, так как это сделает мое изображение слишком маленьким. Я не могу col-xs-5, потому что тогда я не могу использовать смещение.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href=""/> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-0"> 
       <img class="img-responsive" src="http://www.turkcealtyazi.org/images/poster/0903747.jpg" alt=""> 
      </div> 
     </div> 
    </div> 
    <script src="/js/jquery-2.1.3.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
</body> 
</html> 

Fiddle: http://jsfiddle.net/rx4ptj2k/

+0

Не по теме: С Bootstrap 3 подвижен-первых (с восходящим каскадом), это легче расшифровать ваши колонки классы декларации, если они также мобильные первого (перечисленный наименьшего к наибольшему) , – isherwood

ответ

2

Смещение нуля будет только уместно, если вы имели ширину 12. Как это 6 колонок в ширину, вы бы разделить оставшуюся часть 12 в половине для результата от 3.

Использовать col-xs-offset-3 вместо col-xs-offset-0.

Demo

+0

Спасибо. Я понял. – salep

+0

Добро пожаловать! – Sun