自定义表格中的引导导航栏答案

【问题标题】：Bootstrap Navbar in a customized table自定义表格中的引导导航栏
【发布时间】：2019-01-18 10:32:40
【问题描述】：

我正在尝试在由 两列表格组成的网站上创建标题。左侧上的列应该有唯一一行带有徽标，而不是上的列 >right 应该有两行。第一行应该有社会人的联系方式，而第二行也是最后一行应该有一个响应式 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>

【问题讨论】：

贴出你目前尝试过的代码
就像我建立的网站之一：wongsbuildingsupply.com?
@DavidLiang 是的，差不多
@Themes.guide 另外，我添加了我的临时代码。

标签： html responsive-design bootstrap-4 navbar css-tables

【解决方案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 类来右对齐社交链接和导航栏。

我希望这会有所帮助！

【讨论】：