边栏标题未正确包装

时间：2015-05-25 01:26:33

标签： html css twitter-bootstrap

我正在尝试Simple Sidebar Demo。然而，在更改侧边栏标题后，它会混乱：

Screenshot of problem

如何修复它：

  • 菜单项被按下而不是被覆盖
  • 标题的两行之间不存在所有空格

以下是演示的简化版本，仍然显示问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple Sidebar - Start Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
    <div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        This title does not appear to word-wrap properly
                    </a>
                </li>
                <li> <a href="#">Dashboard</a> </li>
                <li> <a href="#">Shortcuts</a> </li>
                <li> <a href="#">Overview</a> </li>
        </div>
        <div id="page-content-wrapper">
            <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> Bla bla
        </div> </div> </div> </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

这是simple-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: 250px;
    }

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

    #sidebar-wrapper {
        width: 250px;
    }

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

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

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

1 个答案:

答案 0 :(得分：1)

修复环绕：

您在此处设置了两个属性：

line-height和text-indent：

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

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

Removing those two properties here makes the text wrap properly

也许您正在寻找margin-left推送整个元素，而不仅仅是第一行？

修复＆＃34;推送＆＃34;：

您还修复了列表项高度，而您的标题列表项的子<a>有两行，这使得<a>元素超出您设置的边界框。

从此代码中删除该高度：

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

（或使其达到最小高度）将使其推动其他列表项目。

也许您正在寻找padding-top和padding-bottom为整个元素添加一些间距，而不是每行？

Here's a total adjustment that makes use of the suggestions I just offered you

margin-left: 

.sidebar-nav li {
    margin-left: 20px;
    line-height: 40px;
}

box-sizing，padding，而不是line-height：

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: initial;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

    padding-top: 15px;
    padding-bottom: 15px;
}
相关问题
最新问题