我需要下面代码的水平滚动条。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <h1 class="page-header">Horizontal Scroll in bootstrap</h1>
    <div class="container-fluid" style="overflow-x:scroll;">
        <div class="col-sm-3">
            <h3>Tree 1</h3>

        </div>

        <div class="col-sm-3">
            <h3>Tree 2</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 3</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 4</h3>

        </div>
        <div class="col-sm-3">
            <h3>Tree 5</h3>

        </div>
    </div>
</body>
</html>

如果执行上述行,则输出显示为图像。但我需要5号树接4号树。不在树下1。如果我增加树6,它显示为树5之后。也就是说,我需要水平滚动条。请帮帮我。

最佳答案

可能是:

style="overflow-x:scroll; white-space: nowrap;"

然后在css中:
.col-sm-3{display: inline-block;}

fiddle

关于html5 - bootstrap -水平滚动条,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31402306/

10-12 13:50