Html 如何使用引导网格创建此布局?

Html 如何使用引导网格创建此布局?,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在设计一个引导模板,需要在左侧有一个侧栏(徽标、导航按钮和联系人信息),在右侧有主要内容 问题是,我需要联系信息部门来跟踪主要内容部门。我如何才能做到这一点 这是我到目前为止的代码…但是联系人信息会被推到页面底部(取决于主要内容长度),我需要它刚好在侧边栏链接之后 <div class="container-fluid"> <div class="row"> <div class="col-md-3"> NAVS LINKS <

我正在设计一个引导模板,需要在左侧有一个侧栏(徽标、导航按钮和联系人信息),在右侧有主要内容

问题是,我需要联系信息部门来跟踪主要内容部门。我如何才能做到这一点

这是我到目前为止的代码…但是联系人信息会被推到页面底部(取决于主要内容长度),我需要它刚好在侧边栏链接之后

<div class="container-fluid">
  <div class="row">
   <div class="col-md-3">
    NAVS LINKS
   </div>
   <div class="col-md-9">
    MAIN CONTENT
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
    CONTACT INFO
   </div>
  </div>
</div>

导航链接
主要内容
联系信息

这就是你想要的吗?尝试删除一行并将联系人信息与导航栏链接放在同一列中

<div class="container-fluid">
  <div class="row">
   <div class="col-md-3">

      <li>HomePage</li>
      <li>Buy</li>
      <li>Sell</li>
      <li>About us</li>
      <li>Location </li>

      <div class="contact">
         CONTACT INFO<br>
         John Smith<br>
         +12346 306434<br>
         johnsmith@internet.com<br>
       </div>
   </div>


   <div class="col-md-9">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro sit 
       dignissimos ad, beatae amet dolorem voluptatibus nisi harum ab odit, 
       exomnis nobis facere nesciunt totam inventore rerum quos quaerat. 
       Lorem 
       ipsum dolor sit amet consectetur adipisicing elit. In saepe 
       provident 
       eligendi ex, eum consequuntur omnis nostrum amet maxime praesentium 
       sunt nulla velit sapiente similique id impedit optio laborum? 
       Distinctio.Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
       Porro sit 

   </div>

 </div>

  • 主页
  • 出售
  • 关于我们
  • 位置
  • 联系信息
    约翰·史密斯
    +12346306434
    johnsmith@internet.com
    Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。波罗西特 我的尊严,我的爱,我的爱,我的爱, 发明者的名字是什么。 洛勒姆 同一天,我坐在同一棵树上。在塞佩 有远见的 药剂师:药剂师,药剂师 难道不能阻止选择劳动吗? 杰出的,杰出的,杰出的。 波罗西特
    如果您想在主要内容后显示联系人信息。只需将其作为内容放在列中,但如果您希望全部显示联系人信息,则只需新建一行,并将列设置为12

       <div class="row">
         <div class="col-md-3">   <--- set this to 12 if you want it all the way across
           CONTACT INFO
         </div>
       </div>
    
    
    
    希望您至少尝试自己编写此代码。我建议你做一些,或者通过谷歌,或者通过搜索,尝试一下。如果您仍然有问题,请返回您的代码并解释您尝试了什么。我已经尝试了很多不同的东西。。。我刚刚发布了一段代码,这段代码最接近我想要实现的目标,因此人们可以理解我的目标。此外,我尽可能地简化了代码。只是说你尝试了一些东西并没有真正的帮助。向我们展示你尝试过的最有效的方法,并向我们展示。你考虑过两列而不是两行吗?我需要联系人信息DIV是在主要内容之后。然后你需要解释一下你到底是什么……因为现在……你没有。这就是为什么我们需要一个演示。这正是我需要的…idk如果有更好或更干净的方法来做它的话,代码pen.io/mrfede/pen/gQxMbK