对齐不适合小屏幕

Question

我创建了一行，然后放了两列（col-md-2和col-md-10，col-sm-4）。但是在移动视图中，内容溢出了帧​​。

在正常屏幕中

小屏幕

代码部分

<div class="row">
					<div class="container listCont" style="height:400px;">
			<ul class="nav nav-pills nav-stacked col-md-2">
				<li class="active"><a href="#class" data-toggle="pill">Class</a></li>
				<li><a href="#lab" data-toggle="pill">Lab</a></li>
			</ul>
			<div class="scrollbar col-md-10 col-sm-4 " id="scrollstyle" style="margin: 0 0 0 0;">
				<div class="tab-content ">
					<div class="tab-pane active " id="class">
						<div class="force-overflow">
							<h4>Pane A</h4>
							<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
							ac turpis egestas.</p>
						</div>
					</div>
					<div class="tab-pane" id="lab">
						<div class="force-overflow">
							<h4>Pane B</h4>
							<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
							ac turpis egestas.</p>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>

Answer 1

阅读bootstrap文档。布局应如下所示

<div class="container">
   <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-2"></div>
      <div class="col-md-2"></div>
      <div class="col-md-2"></div>
      <div class="col-md-2"></div>
   </div>
</div>