Question

嘿，这样的引导存在于内容区域（中间的空间/边距/填充或者你称之为右边和左边的边栏）

所以全部连接

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

这两个站点都有很好的引导但我不需要空格如果可能让我知道谢谢，我试着寻找引导程序本身，但无法找到要删除/添加的内容，如果有一个没有引导程序它的okey太

我感谢你所有的时间，并希望你们明白问题

编辑：我可能做错了但我尝试了

类行没有排水沟，没有垫

但似乎仍无效。

Answer 1

在这里，我已经采取了“没有排水沟”的问题。来自这个要点的课程：https://gist.github.com/berfarah/b50c9e8872c9c44044dc我通过搜索谷歌找到了＃34; gutterless row boostrap css 3＆＃34;。＆＃34;沟槽＆＃34;是列之间空格的布局术语。其他框架可能内置了无内容的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>

Answer 2

问题感谢您的帮助，我使用了bootstrap 4.0.0 alpha 6

代替

需要协助引导程序或类似的东西

2 个答案: