Question

我在引导容器中的:和pre标签内有一些代码，我想水平滚动。这通常可以正常工作，直到我向我的页面的code添加一个flexbox才能完成粘性页脚。在此之后，当页面较窄时（例如移动查看），body不再水平滚动。

这是我的代码（请注意，当您缩小窗口时，code的水平滚动条会消失）：

code

html, body {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
code {
    max-height: 200px;
    background-color: #eeeeee;
    word-break: normal !important;
    word-wrap: normal !important;
    white-space: pre !important;
}
.flexer {
    flex: 1;
}
footer {
    background-color: #CCC;
}

http://jsfiddle.net/nturor46/1/

知道如何在保持滚动<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-12 docs"> <p>Some sample code</p> <pre><code>Loading mirror speeds from cached hostfilebase: mirrors.arpnetworks.com * centosplus: mirrors.arpnetworks.com* extras:mirrors.arpnetworks.com*rpmforge: mirror.hmc.eduupdates: mirrors.arpnetworks.comExcluding Packages in global exclude list</code></pre> </div> </div> </div> <div class="flexer"></div> <footer> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> footer </div> </div> </div> </footer> / pre的同时使用flexbox粘贴页脚？

Answer 1

一个简单的

.container { width:100%; }

正确调整网站大小。但是，Chrome不允许您实际使用滚动条。这是因为它溢出了所有容器的尺寸（除了BODY）。因此，我们必须告诉浏览器正确识别前节点：

.container {
  max-width: 100%;
}
pre {
  position: relative;
}

这告诉Chrome再次正确处理鼠标事件并修复布局

请注意，pre - 节点的边距底部在溢出国家/地区丢失，这可能会导致您的布局看起来很奇怪。在最终版本中使用max-width以确保它不会覆盖在bootstrap中创建的固定宽度语句

PS：在当前的Chrome和Firefox http://jsfiddle.net/nturor46/32/

中进行了测试

Answer 2

这里发生的是肯定 Chrome中的错误。

在玩弄你的小提琴后，用其他浏览器查看它，我可以得出结论，这是Chrome特有的问题。一个好奇的人。

出于某种原因，<div class="col-md-12 docs">增长到它应该具有的大小（p和pre的高度在一起），但没有考虑到内部的水平滚动条pre代码。

这是一张展示问题的图片。红色背景的部分是容器。

由于pre底部的边框宽度为1px，因此实际使用滚动条会留下1px的间隙。你可以自己试试。只是尝试抓住滚动条的最高1px行。

删除flex属性确实可以解决您的问题，但我们不会接受这一点。

现在，我认为在父母的底部添加0.1px的填充可以解决问题，但事实并非如此。然后我尝试将pre标记包含在div中，并使用类chromefix，然后添加以下CSS

.chromefix{
  overflow: hidden;
}

但这创造了一个更奇怪的情况，即容器随着滚动条的增长而增长约50％

所以我尝试将两者结合起来，但在那里并没有很多区别。

这是我开始查看pre标记及其属性的地方。它默认为Bootstrap overflow: auto。所以我尝试添加

pre{
  overflow-x: scroll !important;
}

猜猜是什么？它奏效了！

所以你要做的就是将overflow-x: scroll !imporant添加到pre，你就可以了！这是working Fiddle。

希望这有帮助

作为旁注。我想您也想将max-height: 200px移至pre。当您将其应用于code时，它将无法正常工作。

Answer 3

那些引导样式只会对自然CSS造成严重破坏！

问题似乎来自您的column - 方向flex容器和引导规则之间的冲突。当内容框溢出屏幕时，它基本上导致水平滚动条从pre / code内容框移动到浏览器窗口。

通过这些调整，您所需的布局似乎有效：

将主要.container div设为主要灵活容器（在您的代码中，此角色由body元素播放）
将footer元素移动到此新容器中
使用flex auto margins将页脚粘贴到底部
在必要时覆盖bootstrap margin，padding和width

<强> HTML

<div class="container">

    <div class="row">
        <div class="col-md-12 docs">
            <p>Some sample code</p>
            <pre><code>Loading mirror speeds from ... cached hostfilebase</code></pre>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    footer
                </div>
            </div>
        </div>
    </footer>

</div>

<强> CSS

html, body { height: 100%; }

body > .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;                      /* override bootstrap styles */
    padding: 0;                       /* override bootstrap styles */
}

body > .container > .row {
    margin: 0;                        /* override bootstrap styles */
    display: flex;                    /* nested flex container */
    justify-content: center;          /* center content box on page */
}

body > .container > .row > .docs {
    width: 75%;                      /* adjust width of the content box here */
}

code {
    max-height: 200px;
    background-color: #eeeeee;
    word-break: normal !important;
    word-wrap: normal !important;
    white-space: pre !important;
}

footer {
    margin-top: auto;                /* stick footer to bottom of container */
    background-color: #CCC;
}

Revised Fiddle

在Chrome和Firefox中测试过。

Answer 4

问题似乎是<pre>的宽度。

当屏幕宽度低于768px时，引导程序不会向.container应用特定宽度，因此问题正在发生。

当屏幕宽度高于768px后，来自bootstrap.css的课程进入图片。

@media (min-width: 1200px)
.container {
    width: 1170px;
}
@media (min-width: 992px)
.container {
    width: 970px;
}
@media (min-width: 768px)
.container {
    width: 750px;
}

正如您所看到的，一旦宽度低于768px，就没有给出特定的宽度。

要解决这个问题，你必须编写你的css，就像这样。

@media (min-width: 480px) {
 .container {
        width: calc(100% - 40px);
    }
}

基本上，当屏幕宽度低于.container时，您必须指定768px的宽度。一旦你这样做，它将解决你的问题。

Answer 5

将div标签及其内容包含在div中，如下所示。

<div class="code">{your code goes here}</div>

css：

.code{
     width:92vw; /*you can change this in media query to specific device width for better results*/
     overflow-x:auto;
}

Working jsfiddle link

Flexbox与水平预/代码滚动的兼容性

5 个答案: