Question

我发现这个受欢迎的stackoverflow post（另见jsFiddle），它完全涵盖了我的问题。但是在将此解决方案应用于我的MWE之后，请参阅bootply，它仍然无效。为什么不起作用？

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

要在引导列中获得效果，可以将右边距设置为负值，从而隐藏滚动条。此外，添加更多内容，以便您可以滚动内容！

＆＃13;

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

＆＃13;

<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>
                ...
				<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>

＆＃13;

使滚动条不可见，但仍然能够在Bootstrap网格中滚动

1 个答案: