Question

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

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

使用bootstrap navbar类。我无法理解如何在没有松散功能的情况下将图像分割成两行。

Answer 1

如果我理解您要执行的操作，则需要两行包含三列，其中第一行第一列中的项目适合两行。最好的方法是嵌套。例如，假设您有一列有两列（col-md-3和col-md-9）。在第一列（col-md-3）中，您将拥有一个图像。在第二列（col-md-9）中，下面会有一行包含静态文本。插图：

Image     | First | nested | row
(col-md-3)| ---------------------
          | Text
          | ---------------------

代码示例：

<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>

更多信息：http://getbootstrap.com/css/#grid-nesting

Answer 2

您可以使用某些Flexbox和媒体查询DEMO

执行此操作

@media(min-width: 768px) {
  .two-rows-nav {
    display: flex;
    flex-direction: column;
  }
}

Bootstrap导航栏，两行图像

2 个答案: