Question

<div class="row">
    <div class="col-md-12">
        <div class="well" style="overflow: scroll">
            <div class="col-md-1"> Date </div>
            <div class="col-md-1"> Revenue </div>
            <div class="col-md-1"> Discounts </div>
            <div class="col-md-1"> Items </div>
            <div class="col-md-1"> Purchased </div>
            <div class="col-md-1"> OV </div>
            <div class="col-md-1"> AOV </div>
            <div class="col-md-1"> AIO </div>
            <div class="col-md-1"> TV </div>
            <div class="col-md-1"> UV </div>
            <div class="col-md-1"> RPV </div>
            <div class="col-md-1"> VCR </div>
            <div class="col-md-1"> UCR </div>
            <div class="col-md-1"> ATC </div>
            <div class="col-md-1"> CCR </div>
        </div>
    </div>
</div>

Bootstrap不会在溢出时滚动。相反，它正在进入新的界限。如何滚动。我希望它在x轴上滚动

Answer 1

你可以这样做。

＆＃13;

.col{
  display: inline-block;
  margin-right: 4px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <div class="well" style="overflow-x: scroll; ">
            <div class="col" style="display: inline-block"> Date </div>
            <div class="col"> Revenue </div>
            <div class="col"> Discounts </div>
            <div class="col"> Items </div>
            <div class="col"> Purchased </div>
            <div class="col"> OV </div>
            <div class="col"> AOV </div>
            <div class="col"> AIO </div>
            <div class="col"> TV </div>
            <div class="col"> UV </div>
            <div class="col"> RPV </div>
            <div class="col"> VCR </div>
            <div class="col"> UCR </div>
            <div class="col"> ATC </div>
            <div class="col"> CCR </div>
        </div>
    </div>
</div>
</body>
</html>

＆＃13;

您可以拥有最多12列的网格。所以你不能使用col-md-1。您可以设置其宽度以适合您的可用区域。

Answer 2

修复了你的问题

div.well {
    overflow-x: auto;
    white-space: nowrap;
}
div.well [class*="col"]{
    display: inline-block;
    float: none;
}

演示：https://jsfiddle.net/hellosrini/63gnLaq9/

如何在bootstrap col-md-1中进行滚动

2 个答案: