双列自举网格的右侧覆盖了调整窗口大小时

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

来源

2014-09-19 Ben P

再次阅读文档。每一行广告，12，如果超过十二，每12结算后如果你将列类放在绝对位置，那么你将不会得到期望的结果，不要改变网格的功能。 – Christina 2014-09-19 02:56:12

你最大的问题是你没有包含bootstrap3.0.2.js文件 - 单靠css是不够的。其次 - 网格“气泡” - 所以如果您定义col-xs-12并且没有col值"sm"您将得到12作为sm大小屏幕的col值。所以你可以做一个col-sm-8并删除col-md-8。你也不需要左右添加你的课程。这里有一个很好的网格解释：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>

来源

2014-09-19 03:21:40

双列自举网格的右侧覆盖了调整窗口大小时

回答

相关问题