Question

我正在尝试在由具有两列的表组成的网站上创建标题。左上的列应带有徽标的唯一行，而上的列 >正确应具有两行。第一行应该有社交圈的人，而第二行和最后一行应具有响应性的 navbar （明显在右侧对齐）。

是否可以通过 Bootstrap 获得此信息？

我想到的一个解决方案可能是一个具有两列的表格，左边的行由徽标组成，右边的行由社交链接组成。然后在该表下方，我将实现通常的响应式导航栏。

显然，我更喜欢实施第一个解决方案，但是如果无法使用Bootstrap解决方案，我可能会选择第二个解决方案。

我很高兴收到任何对该目标有利的建议或评论。

非常感谢您的光临！

这是我到目前为止获得的代码：

       <tc> 
           <tr>
               <th>Image</th>
               </tr>
        </tc>


    <tc>
        <tr>
            <th>Social</th>
        </tr>

       <tr>

        <td>
        <nav class ="navbar navbar-dark bg-dark navbar-expand-sm ">
        <button type = "button" class="navbar-toggler" data-toggle="collapse" data-target="#topNav"> <span class="navbar-toggler-icon" ></span> </button>
            <div id="topNav" class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item active"><a href="index.html" class="nav-link"> Home </a></li>
                    <li class="nav-item"><a href="gusti.html" class="nav-link">I nostri gelati</a></li>
                    <li class="nav-item"><a href="storia.html" class="nav-link"> La nostra storia</a></li>
                    <li class="nav-item"><a href="qualita.html" class="nav-link"> Perchè così buono</a></li>
                    <li class="nav-item"><a href="dovesiamo.html" class="nav-link"> Trovaci </a></li>
                </ul>
            </div>
        </nav> 
        </td>
    </tr>
</tc>

  </table>

Answer 1

这是一个纯Bootstrap解决方案，可以帮助您入门：
https://codepen.io/panchroma/pen/djaNgo

显示网格布局的简化代码是

<div class="container">
  <div class="row">
    <div class="col-md-3">logo</div>
    <div class="col-md-9">
      <div class="container">
        <div class="row justify-content-end">social links</div>
        <div class="row justify-content-end">
                <!-- navbar here -->
        </div>  <!-- row -->
      </div>    <!-- container -->
    </div>      <!-- col-md-9 -->
  </div>        <!-- row -->
</div>          <!-- container -->

您可能会看到，如果要使用本机Bootstrap类进行构建，则需要一行包含两列。

左列保留徽标，然后在右列中有一个嵌套容器，其中包含用于社交链接和导航栏的行。

我使用了.justify-content-end类来使社交链接和导航栏右对齐。

我希望这会有所帮助！

在自定义表格中引导Navbar

1 个答案: