css

Question

我真的希望有人可以帮我解决这个问题，因为在我找到解决方案之前，我一直困在我的项目中。

如果您在右侧的蓝色测试色板后看到那里的空白区域。我不明白为什么会这样？我希望蓝色col能够一直走到页面的边缘。

当我删除throws.css中的代码时，它工作正常，这意味着蓝色测试文件将一直向右移动。

有人可以帮我这个，所以我可以继续我的项目。

HTML：

<div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper bg-info">
            <div class="container-fluid bg-warning">
                <div class="row">
                    <div class="col-lg-12 bg-danger">
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                        <h4>Home</h4>
                    </div>
                    <div class="col-lg-1" id="throw_1">

                    </div>
                    <div class="col-lg-7 bg-success" id="content">
                         Content
                    </div>
                    <div class="col-lg-1 bg-warning" id="throw_2">

                    </div>
                    <div class="col-lg-1 bg-success" id="throw_3">

                    </div>
                    <div class="col-lg-1 bg-warning" id="throw_4">

                    </div>
                    <div class="col-lg-1 bg-info col-height col-bottom">
                       test test test test test test test test test
                    </div>



                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

CSS throws.css

#throw_1 {

  height: 500px;
  width: 65px;
  border: 2px solid #FFECB3;
  margin: 5px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
}

#throw_2 { 
  height: 330px;
  width: 65px;
  font-size: 13px;
   margin: 5px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  border: 2px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #fe5606 0%, #fd9a00 100%);
    border-image-slice: 1;
}

#throw_3 {
  height: 330px;
  width: 65px;
    margin: 5px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
    border: 2px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3a4ed5 0%, #3acfd5 100%);
    border-image-slice: 1;
}

#throw_4 {
  height: 500px;
  width: 65px;
  border: 2px solid #FFECB3;
  margin: 5px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
}

/ *屏幕左侧的黑色侧边栏* /

sidebar.css

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

    .sidebar-nav {
        position: absolute;
        top: 0;
        width: 250px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
    }

    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #999999;
    }

    .sidebar-nav li a:hover {
        text-decoration: none;
        color: #fff;
        background: rgba(255,255,255,0.2);
    }

    .sidebar-nav li a:active,
    .sidebar-nav li a:focus {
        text-decoration: none;
    }

    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
    }

    .sidebar-nav > .sidebar-brand a {
        color: #999999;
    }

    .sidebar-nav > .sidebar-brand a:hover {
        color: #fff;
        background: none;
    }

    @media(min-width:768px) {
        #wrapper {
            padding-left: 150px;
        }

        #wrapper.toggled {
            padding-left: 0;
        }

        #sidebar-wrapper {
            width: 150px;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 0;
        }

        #page-content-wrapper {
            padding: 20px;
            position: relative;
        }

        #wrapper.toggled #page-content-wrapper {
            position: relative;
            margin-right: 0;
        }
    }

Answer 1

您已将width添加到#throw div中。当您将specific宽度应用于Bootstrap列类时，它将不会像它假设的那样col-lg-1。

这是您的固定代码：

<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">Start Bootstrap</a></li>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Shortcuts</a></li>
            <li><a href="#">Overview</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper bg-info">
        <div class="container-fluid bg-warning">
            <div class="row">
                <div class="col-lg-12 bg-danger">
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    <h4>Home</h4>
                </div>
                    <div class="col-lg-1" id="throw_1">
                      <div class="fixed-width-col red"></div>
                    </div>
                    <div class="col-lg-7 bg-success" id="content">Content</div>
                    <div class="col-lg-1 bg-warning" id="throw_2">
                      <div class="fixed-width-col blue"></div>
                    </div>
                    <div class="col-lg-1 bg-success" id="throw_3">
                      <div class="fixed-width-col green"></div>
                    </div>
                    <div class="col-lg-1 bg-warning" id="throw_4">
                      <div class="fixed-width-col yellow"></div>
                    </div>
                    <div class="col-lg-1 bg-info col-height col-bottom">test test test test test test test test test</div>
            </div>
        </div>
    </div>
</div>
<!-- /#page-content-wrapper -->

sidebar.css：不变

throws.css

.fixed-width-col{
  position: relative;
  display: block;
  margin: 0 auto;
  width: 65px;
  height: 100%;
  background-color: #Fefefe;
  box-sizing: border-box;
}
.red{
  border: 2px solid #f22125;
}
.blue{
  border: 2px solid #3179be;
}
.green{
  border: 2px solid #abd03b;
}
.yellow{
  border: 2px solid #f8ee4c;
}
#throw_1 {
  height: 500px;
  border: 2px solid #FFECB3;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
  box-sizing: border-box;
}

#throw_2 { 
  height: 330px;
  font-size: 13px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  border: 2px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #fe5606 0%, #fd9a00 100%);
    border-image-slice: 1;
 box-sizing: border-box;
}

#throw_3 {
  height: 330px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
    border: 2px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3a4ed5 0%, #3acfd5 100%);
    border-image-slice: 1;
 box-sizing: border-box;
}

#throw_4 {
  height: 500px;
  border: 2px solid #FFECB3;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
  box-sizing: border-box;
}

小提琴：https://jsfiddle.net/debraj/038agxe6/4/

Answer 2

这是因为您为＃throw_1,2,3等提供了手动宽度，应将其转换为百分比以占据整个屏幕。

或换句话说，只需从throws.css中删除每列的宽度。你已经有了col-lg-1等，让bootstrap处理宽度。

Answer 3

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper bg-info">
        <div class="container-fluid bg-warning">
            <div class="row">
                <div class="col-lg-12 bg-danger">
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    <h4>Home</h4>
                </div>
            </div>
            <div class="row padding-zero">
                <div class="col-lg-1">
                    <div id="throw_1"></div>
                </div>
                <div class="col-lg-7 bg-success">
                <div id="content"></div>
                     Content
                </div>
                <div class="col-lg-1 bg-warning" id="">
                <div id="throw_2"></div>
                </div>
                <div class="col-lg-1 bg-success" id="">
                    <div id="throw_3"></div>
                </div>
                <div class="col-lg-1 bg-warning" id="">
                    <div id="throw_4"></div>
                </div>
                <div class="col-lg-1 bg-info col-height col-bottom">
                   test test test test test test test test test
                </div>
            </div>


                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

#throw_1 {
  height: 500px;
  border: 2px solid #FFECB3;
  margin: 5px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
}

#throw_2 { 
  height: 330px;

  font-size: 13px;
   margin: 5px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  border: 2px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #fe5606 0%, #fd9a00 100%);
    border-image-slice: 1;
}

#throw_3 {
  height: 330px;

    margin: 5px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
    border: 2px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3a4ed5 0%, #3acfd5 100%);
    border-image-slice: 1;
}

#throw_4 {
  height: 500px;
  border: 2px solid #FFECB3;
  margin: 5px;
  background-image:url("../img/boardbg.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: repeat;
  font-size: 13px;
}



#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

    .sidebar-nav {
        position: absolute;
        top: 0;
        width: 250px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
    }

    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #999999;
    }

    .sidebar-nav li a:hover {
        text-decoration: none;
        color: #fff;
        background: rgba(255,255,255,0.2);
    }

    .sidebar-nav li a:active,
    .sidebar-nav li a:focus {
        text-decoration: none;
    }

    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
    }

    .sidebar-nav > .sidebar-brand a {
        color: #999999;
    }

    .sidebar-nav > .sidebar-brand a:hover {
        color: #fff;
        background: none;
    }

    @media(min-width:768px) {
        #wrapper {
            padding-left: 150px;
        }

        #wrapper.toggled {
            padding-left: 0;
        }

        #sidebar-wrapper {
            width: 150px;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 0;
        }

        #page-content-wrapper {
            padding: 20px;
            position: relative;
        }

        #wrapper.toggled #page-content-wrapper {
            position: relative;
            margin-right: 0;
        }
    }
    .padding-zero > div{
        padding: 0px;
    }

请从div中删除宽度和边距。我在html和css中做了一些变化，请检查。