html - 在 css 之后 Bootstrap 空白空间

标签 html css twitter-bootstrap

我真的很希望有人能帮我解决这个问题，因为在我找到解决方案之前我就卡在了我的元素中。

如果您将图片视为右侧蓝色测试列之后的空白区域。我不明白为什么它在那里？我希望蓝色 col 一直延伸到页面的边缘。

当我删除 throws.css 中的代码时，它工作正常，这意味着蓝色测试列一直延伸到右侧。

谁能帮我解决这个问题，这样我就可以继续我的元素了。

Layout

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

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

侧边栏.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;
        }
    }

最佳答案

您已将 width 添加到您的 #throw div。当您将 specific 宽度应用于 Bootstrap 列类时，它不会像预期的那样工作。

这是你的固定代码:

<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:不变

抛出.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;
}

fiddle :https://jsfiddle.net/debraj/038agxe6/4/

关于html - 在 css 之后 Bootstrap 空白空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35312411/

上一篇：javascript - JQuery 在创建 DOM 元素后做一些事情 - DOMNodeInserted 不工作

下一篇：javascript - 单页网站上的侧边栏菜单不起作用

相关文章：

PHP - 如何在提交后隐藏表单

python - 在表格单元格中填充颜色

html - 建立水平时间线 - 元素错位

html - CSS 中的双正方形

javascript - 创建 Greasemonkey 脚本以删除发现的某些 HTML 行

javascript - 在 HTML 中加载多行文本(每 60 秒逐行)的最佳方法是什么？

html - 在移动设备上垂直居中元素

javascript - 添加滑动功能以隐藏 HTML 菜单

twitter-bootstrap - 如何在不修改核心文件的情况下修改 Bootstrap 3 中的断点？

html - Bootstrap div 高度

©2024 IT工具网  联系我们