css - 同一行 Bootstrap 中的多个 div

Question

我想要在同一行中使用溢出选项的多个 div。

.col-xs-3 a{height:100px;background:pink;display:block;margin-top:10px;padding:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-12">
    <div class="col-xs-3"><a>content1</a></div>
    <div class="col-xs-3"><a>content2</a></div>
    <div class="col-xs-3"><a>content3</a></div>
    <div class="col-xs-3"><a>content4</a></div>
    <div class="col-xs-3"><a>content5</a></div>
    <div class="col-xs-3"><a>content6</a></div>
</div>

Answer 1

您需要添加 white-space: nowrap 并使元素成为 inline。添加一些宽度使溢出限制在当前元素内:

.col-xs-12 {
  white-space: nowrap !important;
  max-width: 100%;
  overflow: auto;
}
.col-xs-3 {
  float: none !important;
  display: inline-block !important;
}
.col-xs-3 a {
  height: 100px;
  background: pink;
  display: block;
  margin-top: 10px;
  padding: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-12">
  <div class="col-xs-3"><a>content1</a></div>
  <div class="col-xs-3"><a>content2</a></div>
  <div class="col-xs-3"><a>content3</a></div>
  <div class="col-xs-3"><a>content4</a></div>
  <div class="col-xs-3"><a>content5</a></div>
  <div class="col-xs-3"><a>content6</a></div>
</div>