Jumbotron бок о бок рендерится в порядке стека

Я пытаюсь обновить свой веб-сайт и хотел бы, чтобы два jumbotron были рядом, но они продолжают рендеринг в стеке ?? Что мне не хватает?

заимствованный код из другого потока:

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet"/>

         <div class = "row">
         <div class = "container">
            <div class = "jumbotron text-center col-md-6">
                <h1>Become Awesome</h1>
                <p>Here you will learn how to become awesome.</p>
                <a class = "btn btn-danger pull-right" href = "{% url 
         'awesome_info' %}">More Info</a>
            </div>
           
            <div class = "jumbotron text-center col-md-6">
                <h1>Here you will learn how to become super rad.</h1>
                <p>Tubular dude.</p>
                <a class = "btn btn-success" href = "{% url 'rad_info' %}" 
          role = "button">More Info</a>
            </div>
          </div>
          </div>

Не могли бы вы добавить CSS, который вы для этого используете?

— 06.10.2018 07:43

Я думал, что bootstrap.min.css будет работать автоматически. Знаете ли вы, как мне нужно написать CSS, чтобы джамбтроны располагались вплотную друг к другу?

— 07.10.2018 19:07

css

06.10.2018 07:32

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Необходимо изменить вашу разметку.

Open snippet in full-screen

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel = "stylesheet"/>

<div class = "container">
  <div class = "row">
    <div class = "col-md-6 col-sm-6">
      <div class = "jumbotron text-center">
        <h1>Become Awesome</h1>
        <p>Here you will learn how to become awesome.</p>
        <a class = "btn btn-danger pull-right" href = "{% url 
 'awesome_info' %}">More Info</a> </div>
    </div>
    <div class = "col-md-6 col-sm-6">
      <div class = "jumbotron text-center">
        <h1>Here you will learn how to become super rad.</h1>
        <p>Tubular dude.</p>
        <a class = "btn btn-success" href = "{% url 'rad_info' %}" 
  role = "button">More Info</a> </div>
    </div>
  </div>
</div>

когда я нажимаю кнопку «Выполнить фрагмент кода», он по-прежнему отображается с накоплением? Как написать код, чтобы они были рядом /

— 07.10.2018 19:24

извините, когда я щелкнул по открытому в новом окне, я вижу его рядом. но на моем веб-сайте он все еще отображается с накоплением?

— 07.10.2018 19:39

После запуска кода нажмите «Полная страница» в правом нижнем углу фрагмента.

— 08.10.2018 06:30

Ануреш, я видел это на полной странице, но мой веб-сайт с этим кодом не отображается рядом ... какие-нибудь идеи, почему бы и нет ??

— 09.10.2018 17:03

Не могли бы вы дать ссылку на свой сайт?

— 10.10.2018 05:49

06.10.2018 07:40