CSS / Bootstrap: хотите найти 2 div рядом друг с другом в div

Question

Мой вопрос выше - мой текущий код:

        <!-- Masthead-->
    <header class="masthead">
        <div class="container">
            <div class="masthead-subheading" style="color: black;">Welcome</div>
            <div class="masthead-heading" style="color: black;">Dr. Lim Wee Chai</div>
            <div class="ml12" style="color: black;">My Life, My Journey</div>
            <div style="float:left;"><img src = "about.png" width="50%" height="32%"/></div>
        </div>

    </header>

, а ниже - результат

Может кто-нибудь помочь о том, как убедиться, что изображение находится слева (рядом со словом доктор Лим Ви Чай)?

Answer 1

Вы не используете bootstrap grid утилиту. Прочитайте Сетка do c, чтобы узнать больше.

Вы можете установить сетку из двух столбцов, которая устанавливает div бок о бок, используя класс col, назначенный div. Однако сетка имеет определенную структуру, которой вы должны будете следовать. См. Ниже.

В любом столбце должна быть строка. Другими словами, столбец / столбцы должны быть дочерними элементами строки.

<div class="row">
    <div class="col"></div>
    ...
</div>

Вы можете установить минимум один и максимум двенадцать столбцов в строке. Прочитайте bootstrap grid do c, чтобы узнать больше.

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

<div class="container">
  <div class="row">
    <div class="col">
      <img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/12/30/14/13/snail-4729777_960_720.jpg"/>
    </div>
    <div class="col">
      <h2>Equal-width</h2>
      <p>For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>
    </div>
  </div>
</div>

Answer 2

Вы ищете !

Answer 3

Вы должны использовать строки и столбцы https://getbootstrap.com/docs/4.0/layout/grid/