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

您可以在计算机上尝试此完整代码。当我调整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>

您最大的问题是没有包含bootstrap 3.0.2.js文件-仅使用css是不够的。第二，网格"冒泡"，所以如果你定义col-xs-12，而"sm"没有col值，那么你会得到12作为sm大小屏幕的col值。所以你可以做一个col-sm-8，去掉col-md-8。您也不需要添加left或right作为您的类。以下是对网格的一个很好的解释：http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system

这是你的html的主体：你有一些混乱的（关闭但从未打开）脚本标记——我为引导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>

相关内容

最新更新

热门标签：