Question

我真的试着在stackoverflow上四处寻找我的问题的答案。我之前可以看到有威胁，但我找不到任何能解决我问题的东西。

我在bootstrap中创建我的结构。我的侧边栏在左侧。从侧边栏到右侧的末端有12-col。在右侧，我不能让蓝色col一直到页面的边缘。如果我试图将内容col设置为8，则蓝色col会跳到页面下方。

我实际上喜欢侧边栏，就像在左侧一样。这意味着我想知道如何将蓝色col一直带到场地的边缘，并设置一个高度，所以它就像左侧的黑色侧边栏一样。

当我删除我的CSS它实际上工作正常，所以我猜它与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：

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

特定列引导的宽度和高度

0 个答案: