需要幫助的引導或類似的東西

哎確實像這樣的引導存在，其中，在內容區域（中間的心不是空間/保證金/填充或你怎麼稱呼它，從右側和左側邊欄需要幫助的引導或類似的東西

等什麼的所有連接的

https://bootsnipp.com/snippets/featured/page-with-left-and-right-sidebar https://www.bootply.com/101100

這兩個網站都有很好的引導，但我需要沒有空格如果可能的話讓我知道，謝謝，我試圖尋找在引導本身，而不能找到刪除/添加，如果一些得到一個沒有bootstrap其okey太

我apprecitate所有的時間，希望你們理解質疑

編輯：我可能做錯了，但我試過

類行沒有排水溝，沒有墊

，但似乎仍然沒有工作。

來源

2017-06-15 Deniz Bircan

聽起來像你想刪除的排水溝？ https://julienmelissas.com/no-gutter-column-trick-for-bootstrap/哪個版本的bootstrap？ – admcfajn

bootstrap-3.3.7-dist –

沒有人可以確切嗎？ :( –

在這裏，我已經從這個要點中拿走了'no-gutter'類：https://gist.github.com/berfarah/b50c9e8872c9c44044dc我通過搜索google找到了「gutterless row boostrap css 3」。「陰溝」是列之間空間的佈局術語。其他框架可以有一個gutterless CSS類內置的。

<div class="navbar navbar-fixed-top navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"><a class="navbar-brand" href="#">Project name</a><a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="glyphicon glyphicon-bar"></span> 
      <span class="glyphicon glyphicon-bar"></span> 
      <span class="glyphicon glyphicon-bar"></span> 
     </a> 
     </div> 
     <div class="navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a> 
       </li> 
       <li><a href="#about">About</a> 
       </li> 
       <li><a href="#contact">Contact</a> 
       </li> 
      </ul> 

     </div> 
     <!--/.navbar-collapse --> 
    </div> 
</div> 
<div class="container"> 
    <div class="row no-gutter"> 
     <div class="col-md-3"> 
      <div class="sidebar-nav-fixed affix"> 
       <div class="well"> 
        <ul class="nav "> 
         <li class="nav-header">Sidebar</li> 
         <li class="active"><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li class="nav-header">Sidebar</li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li class="nav-header">Sidebar</li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
        </ul> 
       </div> 
       <!--/.well --> 
      </div> 
      <!--/sidebar-nav-fixed --> 
     </div> 
     <!--/span--> 
     <div class="col-md-6"> 
      <div class="jumbotron"> 
       <h1>Hello, world!</h1> 

       <p>This is a template for a simple marketing or informational website. It 
        includes a large callout called the hero unit and three supporting pieces 
        of content. Use it as a starting point to create something more unique.</p> 
       <p><a class="btn btn-primary btn-lg">Learn more »</a> 
       </p> 
      </div> 

     </div> 
     <!--/span--> 
     <div class="col-md-3"> 
      <div class="sidebar-nav-fixed pull-right affix"> 
       <div class="well"> 
        <ul class="nav "> 
         <li class="nav-header">Sidebar</li> 
         <li class="active"><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li class="nav-header">Sidebar</li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li class="nav-header">Sidebar</li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
         <li><a href="#">Link</a> 
         </li> 
        </ul> 
       </div> 
       <!--/.well --> 
      </div> 
      <!--/sidebar-nav-fixed --> 
     </div> 
     <!--/span--> 
    </div> 
    <!--/row--> 

    <footer> 
     <p>© Company 2012</p> 
    </footer> 
</div> 
<!--/.fluid-container--> 

<style> 
body { 
    padding-bottom: 40px; 
    padding-top: 60px; 
} 

.sidebar-nav-fixed { 
    /*width:14%;*/ 
    width:100% 
} 

.no-gutter.row, 
.no-gutter.container, 
.no-gutter.container-fluid{ 
    margin-left: 0; 
    margin-right: 0; 
} 

.no-gutter>[class^="col-"]{ 
    padding-left: 0; 
    padding-right: 0; 
} 
</style>

來源

2017-06-17 23:02:41 admcfajn

它似乎仍然有空間:( –

這個例子中列之間不應該有空格，你的項目中是否有其他代碼可能會影響它？ – admcfajn

問題感謝您的幫助，我用引導4.0.0阿爾法6

代替

來源

2017-06-21 06:28:48

需要幫助的引導或類似的東西

回答

相關問題