Css 调整窗口大小时，两列引导网格的右侧被覆盖
您可以在计算机上尝试此完整代码。当我调整Chrome和Firefox的大小时，右侧（第2列）将超出左侧 在JSFIDLE中，这很难观察到，但如果您想： 这似乎是由我的Css 调整窗口大小时，两列引导网格的右侧被覆盖,css,twitter-bootstrap,Css,Twitter Bootstrap,您可以在计算机上尝试此完整代码。当我调整Chrome和Firefox的大小时，右侧（第2列）将超出左侧 在JSFIDLE中，这很难观察到，但如果您想： 这似乎是由我的col-xs-12引起的，但如果我想要一个堆栈行为，这不是使用的吗 第二个问题是，当我调整窗口大小时，我还可以看到右侧继续（文本未完成！）如何修复？我应该应用文本换行吗 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Con
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>
robots.txt扫描仪演示
.对{
位置：绝对位置；
左侧填充：0；
右：0；
显示：块；
填充：0px；
身高：100%；
字体系列：Arial、Helvetica、无衬线字体、Tahoma、Verdana、无衬线字体；
背景#708090；
颜色：黑色；
}
.左{
位置：绝对位置；
排名：0；
底部：0；
左：0；
排名：0；
底部：0；
左：0；
左侧填充：0；
右边填充：0；
}
#编辑{
位置：相对位置；
排名：0；
底部：0；
左：0；
}
EWKWKJRKWEJLRJWRWERJWLKRJWLR1111
变量编辑器=ace.edit（“编辑器”）；
编辑器.setTheme（“ace/theme/chrome”）；
editor.getSession（）.setMode（“ace/mode/text”）；
编辑：setShowPrintMargin（假）；
editor.setOptions({
字体大小：“13磅”，
使用者：错
});
editor.session.setOption（“useWorker”，false）；
函数resizeAce（）{
返回$（'#editor'）.height（$（window.height（））；
};
//倾听变化
$（窗口）。调整大小（调整大小）；
//初设
resizeAce（）；
col-xs-12“sm”col-sm-8<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>
EWKWKJRKWEJLRJWRWERJWLKRJWLR1111
变量编辑器=ace.edit（“编辑器”）；
编辑器.setTheme（“ace/theme/chrome”）；
editor.getSession（）.setMode（“ace/mode/text”）；
编辑：setShowPrintMargin（假）；
editor.setOptions({
字体大小：“13磅”，
使用者：错
});
editor.session.setOption（“useWorker”，false）；
函数resizeAce（）{
返回$（'#editor'）.height（$（window.height（））；
};
//倾听变化
$（窗口）。调整大小（调整大小）；
//初设
resizeAce（）；