雙列自舉網格的右側覆蓋了調整窗口大小時

您可以在計算機上試試這個完整的代碼。當我調整我的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

雙列自舉網格的右側覆蓋了調整窗口大小時

回答

相關問題