Question

我正在设计一个Bootstrap模板，该模板需要在左侧具有侧边栏（徽标，导航按钮和联系信息），在右侧具有主要内容。

问题是我需要联系信息div来跟随主要内容div。我该怎么办？

这是我到目前为止的代码...但是联系信息被推送到页面的底部（取决于主要内容的长度），我需要它在侧边栏链接之后

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

Answer 1

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

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

如果要在主要内容之后输入联系方式。只需将其作为内容放在该列中，但是如果您想获取所有联系信息，则只需做一个新行并将该列设置为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>

如何使用Bootstrap网格创建此布局？

1 个答案: