Html 图像位于两行上的引导导航栏

请帮忙。 我需要做同样的构造：

|           |   Menu item1 | Menu item2    
|   Image   |____________________________________________________________
|           |   Some static text
__________________________________________________________________________

使用引导navbar类。

---

我无法理解如何在不丢失功能的情况下将图像分割成两行。

您可以通过一些

Flexbox

和媒体查询来实现这一点

@介质（最小宽度：768px）{
.两排导航{
显示器：flex；
弯曲方向：立柱；
}
}

如果我理解您的意图，您需要两行三列，其中第一行第一列中的项目适合两行。最好的方法是筑巢。例如，假设您有一行有两列（col-md-3和col-md-9）。在第一列（col-md-3）中，您将有一个图像。在第二列（col-md-9）中，有一行下面是静态文本。说明：

---

代码示例：

<div class="row">
  <!-- The first column where the image will be -->
  <div class="col-md-3">
    <img src="your-img.jpg" alt="img">
  </div>

  <!-- The second column where the row and content will be nested -->

  <div class="col-md-9">

    <!-- Nested row -->
    <div class="row">

      <div class="col-md-6">Home</div>
      <div class="col-md-6">About</div>

    </div>

    <!-- Content -->
    This is where your text would go.
  </div>
</div>

家
关于
这就是你的文本要去的地方。

---

更多信息：

您尝试过吗？有代码吗？请提供您迄今为止尝试过的相关代码。

<div class="row">
  <!-- The first column where the image will be -->
  <div class="col-md-3">
    <img src="your-img.jpg" alt="img">
  </div>

  <!-- The second column where the row and content will be nested -->

  <div class="col-md-9">

    <!-- Nested row -->
    <div class="row">

      <div class="col-md-6">Home</div>
      <div class="col-md-6">About</div>

    </div>

    <!-- Content -->
    This is where your text would go.
  </div>
</div>