Центр `.img-отзывчивый`, в` .container-fluid` и `row`, в bootstap?

Question

Я не ожидаю ответов здесь, чтобы добавить многое в понимание информатики в XXI веке, но я благодарен за помощь сообщества.

У меня есть изображение, которое я пытаюсь центрировать в bootstap. Он находится в .container-fluid, a .row и .col-xs-6 с .offset-xs-3. Сам <img...> - .img-responsive. Вы можете увидеть проект по этому кодексу: http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000.

Изображение не центрировано. Я должен иметь возможность получить изображение, которое масштабируется с шириной окна просмотра (a la SVG) и находится посередине страницы. Кажется, я не могу справиться с этим.

Мне интересно, связано ли это с тем, что я беру «сырое» изображение из Dropbox в качестве своего src, что изображение .jpg или какая-то комбинация? Опять же, я ноб в этом, так что в равной степени возможно, что есть только опечатка, где-то я не могу найти. Я был над документами для начальной загрузки, и различные вопросы SO безрезультатно. Единственное решение, которое я нашел, это удаление <img...> из контейнера и строки и назначение ... class="centered-block" .... Однако, если я принципиально не воспринимаю что-то, но (1) мне не нужно это делать, и (2) вместо того, чтобы избивать, я хотел бы понять, что моя концептуальная ошибка в любом случае, для моего собственного обучения.

PS - совершенно несвязанный, но теги <a ...></a> не могут быть доступны для просмотра. Если у кого-то есть какие-то идеи, это тоже здорово.

Оказывается, основная проблема заключается в том, что CodePen полагается на Bootstrap 4, а не (как я полагал) Bootstrap 3.

Answer 1

Вы используете классы из Bootstrap 3, но загружаете таблицу стилей из Bootstrap 4; они не совместимы по всем направлениям. img-responseive больше не существует, а также классы col-xs- *. См. Images и Grid Options.

Примечание. Ваши ссылки не будут работать, потому что они недействительны HTML, и вы также закрываете h2 с h3, validate вашей разметкой.

Рабочий пример:

@media (max-width: 480px) { 
 
    h1 { 
 
    font-size: 5vmax; 
 
    } 
 
    h2 { 
 
    font-size: 3.5vmax; 
 
    } 
 
    h3 { 
 
    font-size: 2.5vmax; 
 
    } 
 
    li { 
 
    font-size: 2.5vmax; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="jumbotron"> 
 

 
    <h1 class="text-primary">Dr. Clair Cameron Patterson</h1> 
 

 
    <h2 class="text-secondary">The man who first learned the age of the Earth, and helped save a civilization from the dangers of its use of lead.</h2> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     <img src="https://www.dropbox.com/s/91fw6aazyxzb178/image-for-codecamp-tribute-page.jpg?raw=1" alt="Cartoon Image of Clair Cameron Patterson at Congressional Hearing" class="img-fluid mx-auto d-block" style="padding:1.5vmin"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <h3>Academics</h3> 
 
    <ul> 
 
    <li>Undergraduate, Grinnell College</li> 
 
    <li>PhD, University of Chicago</li> 
 
    <li>Researcher, California Institute of Technology</li> 
 
    </ul> 
 

 
    <h3>Brief Timeline</h3> 
 

 
    <ul> 
 
    <li><strong>1956</strong>: found the earth to be 4.55 Billion years old using <a href="https://en.wikipedia.org/wiki/Lead%E2%80%93lead_dating">lead-lead dating</a> and 
 
     <a href="https://en.wikipedia.org/wiki/Canyon_Diablo_(meteorite)">a fragment of a metorite that fell in Arizona</a>. This calculation has been largely undisturbed since.</li> 
 
    <li><strong>1965</strong>: began campaign against lead in various products, especially gasoline, which at that time was emitting lead into the atmosphere.</li> 
 
    <li><strong>1978</strong>: wrote a 78-page minority opinion as part of a National Research Council (NRC) panel stating that controls on lead in various products had to start immediately, including gasoline, food containers, paint, glazes, and water distribution 
 
     systems. 
 
    </li> 
 
    <li>by the late <strong>1990s</strong>: levels of lead in Americans' blood has dropped by up to 80%. Though connections with Dr. Patterson's work are not clear, as the leading researcher in the area, and constant campaigner against the use of lead, it 
 
     is likely he was a major antecedant of this change.</li> 
 
    </ul> 
 

 
</div>