标题旁的bootstrap jumbotron中的图像

Question

我有以下自举巨人，但无法正常工作。

div class="jumbotron" style="color:#ffffff">
    <div>
        <div style="display:inline-block;">
            <img src="~/Content/Images/3.png" height="10%" width="10%" />
        </div>
        <div style="display:inline-block;">
            <h1 class="display-3">Welcome to My Site!</h1>
        </div>
    </div>
        <div>
            <p class="lead">
                ● brag about something good
                </br>
                ● brag about another good thing
                </br>
                ● make same vague promise
            </p>
        </div>
        <hr class="my-4">
        <p>
            insert some fake aspirations and use the phrase 'we strive to'
        </p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Visit</a>
        </p>
    </div>

我希望它看起来像这样

请帮助。

Answer 1

以下是一个可以帮助您的示例：

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

<div class="jumbotron bg-dark text-white">
  <div class="media">
    <img class="mr-3" src="http://rs882.pbsrc.com/albums/ac23/Silllyghostfreak/My%20Fakegees/Seelzplz.png~c200" height=64>
    <div class="media-body">
      <h5 class="mt-0">Media heading</h5>
      <p class="lead mb-0">● brag about something good</p>
      <p class="lead mb-0">● brag about another good thing</p>
      <p class="lead mb-0">● make same vague promise</p>
    </div>
  </div>
</div>