使侧边栏响应 position 相关

Question

My sidebar position is relative with other content.我的侧边栏 position 与其他内容相关。 when I change my sidebar position to fixed it overlaps the content and does not work well with position set to fixed compared to relative.当我将侧边栏 position 更改为固定时，它与内容重叠，并且与相对的 position 设置为固定时无法正常工作。 I want my sidebar to move with the page while remaining responsive to other content.我希望我的侧边栏与页面一起移动，同时保持对其他内容的响应。 Any help will be highly appreciative.任何帮助将不胜感激。

My css:我的 css：

.side-menu #dropdown {
    border: 0;
    margin-bottom: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
.side-menu #dropdown .caret {
    float: right;
    margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
    float: right;
}
.side-menu #dropdown > a {
    border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body {
    padding: 0;
    background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
    width: 100%;
}

.side-menu #dropdown .panel-body .panel-body li:last-child {
    border-bottom: 1px solid #e7e7e7;
}
 
   .side-menu {
      position: relative;
      top: 0;
      left: 0;
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 1px;
    }
    
    /* When you mouse over the navigation links, change their color */
    .side-menu a:hover {
      color: #f1f1f1;
    }

Html: Html：

   <html>
    <head>
    <meta name="description" content="Bootstrap.">  
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js" defer></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">


    <!-- THIS LINE -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
<body>
<div class="container">  
    <div class="menu-container">    
    <div class="col-md-2 sidebar">
    <div class="row">
    <!-- uncomment code for absolute positioning tweek see top comment in css -->
    <!-- Menu -->
    <div class="side-menu" >
        <nav class="navbar navbar-default" id="this_navigation" role="navigation" >
            <!-- Main Menu -->
            <div class="side-menu-container">
                <ul class="nav sidebar-side">
                    
                    <li class="active"><a href="/index/<%= role %>/<%= _id %>" style="color: gray;"><span class="glyphicon glyphicon-dashboard"></span> Home</a></li>   


                    </ul>
            </div>
            
        
            </nav>
        
        
        </div>
     </div>
    </div>
    <div class="col-md-7 content">
        <div class="container">
            <div class="row">

                <!--<div class="panel panel-primary" hidden>
                     <div class="panel-heading">
                         <h3 class="panel-title" align="center">Car Tracking Device Information</h3>
                     </div>
                    </div>-->
                    <div class="container" align="center">
                     <div class="row" >
                     <h3 >Filter Tables</h3>
                     <p >Type something in the input field to search the devices for country, manufacturer, models or versions:</p>  
                     <input class="form-control" id="myInput" type="text" placeholder="Search.."  style="width: 50%; height:36px;"/>
                    </div></div>
                    <br/>
            
            
        </div>
    
            
     </div>
    </div>

</div>
</div>
</body>

</html>

Answer 1

When using .col-md , you must use .row first.使用.col-md时，必须先使用.row 。

This code这段代码

<div class="menu-container">
    <div class="col-md-2 sidebar">...</div>
    <div class="col-md-7 content">...</div>
</div>

Replace it代替它

<div class="menu-container">
    <div class="row">
        <div class="col-md-2 sidebar">...</div>
        <div class="col-md-7 content">...</div>
    </div>
</div>

You can sticky-js for sticky sidebar.您可以将sticky-js用于粘性侧边栏。

Example here: https://codepen.io/yasgo/pen/QWKWEWE此处示例： https://codepen.io/yasgo/pen/QWKWEWE

使侧边栏响应 position 相关

问题描述

1 个解决方案

解决方案1
0 2020-11-26 11:35:54

使侧边栏响应 position 相关

问题描述

1 个解决方案

解决方案1 0 2020-11-26 11:35:54

解决方案1
0 2020-11-26 11:35:54