Question

我正在尝试创建一个侧边栏分隔线，它将触及包装器的边缘（顶部和底部），随着更多内容的添加，它将自动调整高度。当浏览器宽度调整大小并且信息崩溃时，我希望分隔符消失。

这是我的代码：

        <div class="container">
    <div class="wrapper">

        <div class="row">
        <div class="col-md-12">

<!-- BODY -->
            <div class="row">
            <div class="col-md-9">
                <h3>Campus News</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

<!-- SIDEBAR -->            
            <div class="col-md-3">
            <div class="sidebar-divider hidden-xs hidden-sm">
                <h3>Calendar of Events</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    </div>

这是CSS：

.sidebar-divider {
border-left: 1px solid #ccc;
top: 0;
right: 0;
padding-left: 30px;
}

.wrapper {
width: 100%;
height: auto;
background-color: #fff;
border-radius: 3px
border: 1px solid #ccc;
margin: 30px 0px; 
padding: 30px 30px;
}

提前感谢您的帮助。

Answer 1

你可以从绝对定位的伪元素集中绘制它。

div.wrapper {
position:relative
}
/* ! remove sidebar-divider border */
div.wrapper:before {
content:'';
border-left: 1px solid #ccc;
position:absolute!important;
top:0;
bottom:0;
right:24.25%;
}

它也可以从.sidebar-divider中得到更多的CSS

div.wrapper {
position:relative
}
div.wrapper * {
position:static;
border:none;
}
/* ! remove sidebar-divider border */
div.sidebar-divider:before {
content:'';
border-left: 1px solid #ccc;
position:absolute!important;
top:0;
bottom:0;
right:24.25%;
}

在包装器的端到端的bootstrap中创建1px侧边栏分隔符

1 个答案: