Question

您可以在计算机上试用此完整代码。当我调整Chrome和Firefox的大小时，右侧（第2列）将超出左侧。

在jsfiddle中，这很难观察，但如果你想：http://jsfiddle.net/kkmzkkyq/5/

这似乎是由我col-xs-12引起的，但如果我想要一个堆栈行为，是不是会使用它？

第二个问题是，当我调整窗口大小时，我也可以看到右侧继续（文本未完成！）如何修复？我应该应用文字换行吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>robots.txt scanner demo</title>
<link rel="stylesheet" type="text/css"
      href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">

<!-- CSS are mainly based off
     http://tech.deepumohan.com/2013/09/javascript-ace-editor-positioning-bootstrap.html
     ACE editor CSS is a pain to work with....
-->
<style type="text/css" media="screen">
.right {
    position: absolute;
    padding-left: 0;
    right: 0;
    display: block;
    padding: 0px;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, sans-serif;
    background: #708090;
    color: black;
}

.left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    top: 0;
    bottom: 0;
    left: 0;
    padding-left: 0;
    padding-right: 0;
}

#editor {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
}

</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8 left">
            <div id="editor"></div>
        </div>
        <div class ="col-xs-12 col-md-4 right">
            <h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
        </div>
    </div>
</div>
</script>
<script type="text/javascript" charset="utf-8"
        src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" charset="utf-8"
        src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js">
</script>
</script>


<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/chrome");
    editor.getSession().setMode("ace/mode/text");
    editor.setShowPrintMargin(false);
    editor.setOptions({
        fontSize: "13pt",
        useWorker: false
    });
    editor.session.setOption("useWorker", false);
    function resizeAce() {
      return $('#editor').height($(window).height());
    };
    //listen for changes
    $(window).resize(resizeAce);
    //set initially
    resizeAce();
</script>
</body>
</html>

Answer 1

你最大的问题是你没有包含bootstrap3.0.2.js文件 - 单靠css是不够的。其次 - 网格“冒泡” - 所以如果你为col-xs-12定义"sm"而没有col值，你会得到12作为sm尺寸屏幕的col值。所以你可以做一个col-sm-8并删除col-md-8。您也不需要添加左或右作为您的类。这是对网格的一个很好的解释：http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system

这是你的html的主体：你有一些凌乱（封闭但从未打开过）的脚本标签 - 我添加了bootstrap JS文件的include。你仍然需要解决文本问题（它没有被包装，因为我没有期望的空格。

<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8">
            <div id="editor"></div>
        </div>
        <div class ="col-xs-12 col-sm-4">
            <h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
        </div>
    </div>
</div>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<script 
        src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



<script 
        src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>


<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/chrome");
    editor.getSession().setMode("ace/mode/text");
    editor.setShowPrintMargin(false);
    editor.setOptions({
        fontSize: "13pt",
        useWorker: false
    });
    editor.session.setOption("useWorker", false);
    function resizeAce() {
      return $('#editor').height($(window).height());
    };
    //listen for changes
    $(window).resize(resizeAce);
    //set initially
    resizeAce();
</script>

</body>

在调整窗口大小时，两列引导网格的右侧覆盖

1 个答案: