Scroll-Leiste nicht sichtbar, aber immer noch in der Lage, innerhalb eines Bootstrap-Rasters zu scrollen

Question

Ich fand diese beliebte stackoverflow post (siehe auch jsFiddle), die genau mein Problem abdeckt. Aber nach dem Anwenden dieser Lösung auf meinen MWE, siehe bootply, funktioniert es immer noch nicht. Warum funktioniert es nicht?

HTML:

<div class="container"> 
<h1>Hello!</h1> 

<div class="row"> 
    <div class="col-sm-3" style="background-color:yellow;"> 
     <div class="outer"> 
      <div class="inner"> 
       <p>hello</p> 
       <br> 
       ... 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-9" style="background-color:pink;"> 
     <p>hello once</p> 
    </div> 
</div> 

CSS:

.inner { 
    height:200px; 
    overflow-y: auto; 
} 

.outer{ 
    overflow:hidden; 
} 

Answer 1

Um die Wirkung innerhalb einer Bootstrap-Spalte zu erhalten, können Sie die rechten Ränder auf einen Minuswert gesetzt und verstecken dadurch die Scrollbar . Fügen Sie weitere Inhalte hinzu, damit Sie etwas scrollen können!

.inner { 
 
    height:200px; 
 
    overflow-y: auto; 
 
margin-right:-15px; 
 
} 
 

 
.outer{ 
 
    overflow:hidden; 
 
    margin-right:-15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    
 
    <div class="container"> 
 
<h1>Hello!</h1> 
 

 
<div class="row"> 
 
    <div class="col-sm-3" style="background-color:yellow;"> 
 
     <div class="outer"> 
 
      <div class="inner"> 
 
       <p>hello</p> 
 
       <br> 
 
       ... 
 
\t \t \t \t <p>hello</p> 
 
       <br> 
 
       ... 
 
       <p>hello</p> 
 
       <br> 
 
       ... 
 
<br> 
 
       ... 
 
       <p>hello</p> 
 
       <br> 
 
       ... 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-9" style="background-color:pink;"> 
 
     <p>hello once</p> 
 
    </div> 
 
</div>