Question

我有两列“左侧栏” <aside class="col-md-2">，以及“ {-1}}中的“主要内容” <main class="col-md-10 main-content">。

我使用<div class="container"而不是<div class="container" >为用户提供舒适的可见空间。

“左侧”显示CSS属性的层次结构，其中一些很长，可以占用多行。因此，我将<div class="container-fluid" >设置为利用左侧的空白区域。

这是密码

white-space: nowrap;

效果很好，直到我将左侧边栏设置为固定，它们才相互重叠。

<html>
<head>
    <title>Learn CSS</title>
    <!-- <link rel="stylesheet" src="./css/bootstrap.css"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.css">
    <style>
    .row-eq-height {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        /* display:         flex; */
        } 
    .left-sidebar > ul{
        direction: rtl;
        white-space: nowrap;
    }
    .left-sidebar, .main-content {
        border: 1px solid blue;
    }
    </style>
</head>

<body>
<div class="container" style="margin-top: 20px">
    <div class="row row-eq-height">
        <aside class="col-md-2">
            <div class="left-sidebar">
         <!-- <div class="left-sidebar" style="position: fixed;"> -->
            <ul>
                <li>
                    <a href="">Selectors</a>
                    <ul>
                        <li>
                            <a href="">Simple Selector</a>
                            <ul>
                                <li> <a href="">Type Selector</a> </li>
                                <li> <a href="">ID Selector</a> </li>
                                <li> <a href="">Class Selector</a> </li>
                                <li> <a href="">Universal Selector</a> </li>
                                <li> <a href="">Attribute Selector</a> </li>
                            </ul>
                        </li><!-- selectors -->
                    </ul>
                </li>
            </ul>
            </div>
        </aside>
        <main class="col-md-10 main-content">
            <button type="button" class="btn btn-default" aria-label="Left Align">
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
            </button>

            <button type="button" class="btn btn-default btn-lg">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
            </button>
        </main>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script>
</script>
</body>

</html>

如果我将“容器流体”设置为<div class="container" style="margin-top: 20px"> <div class="row row-eq-height"> <aside class="col-md-2"> <div class="left-sidebar" style="position: fixed;"> <ul>，则重叠部分消失了，但是我想要的可见空间比其他空间更多。

固定的侧边栏与标准引导容器中的主要内容重叠

0 个答案: