我希望 jQuery 終端的輸入和輸出完全位于用 Bootstrap 分割的螢屏的左上角，盡管我不知道該怎么做。理想情況下，它應該類似于 Codecademy 頁面（除了終端位于左上角之外，類似這樣）。
我認為在 div 左側塊中添加以下終端代碼會起作用。但是，通過這樣做，接線盒反而位于左側類的外部和下方。
有什么意見或建議嗎？一般來說，我只是不知道如何使用 Bootstrap/CSS 來操作 jQuery 終端。
var body = $('body').terminal(
function(command) {
this.echo(command);
}, {
greetings: 'Test',
name: 'Test',
}
);
terminal_print = function(str) {
body.echo(str);
};.leftside,
.rightside {
height: 50vh;
width: 100%;
}
@media screen and (min-width:768px) {
.leftside,
.rightside {
height: 100vh;
}
}
.leftside {
background: black;
}
.rightside {
background: white;
}<head>
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="row g-0">
<div class="col-md-6 g-0">
<div class="leftside"></div>
</div>
<div class="col-md-6 g-0">
<div class="rightside d-flex justify-content-center align-items-center">
This page is intentionally blank
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
您已將 body 元素指定為目標。為什么不使用你的元素？（代碼的位置無關緊要——您在第一行指定目標元素。）
為了清楚起見，我已將您的身份類別轉換為 ID 并更新了您的終端函式名稱。
var terminal = $('#leftside').terminal(
function(command) {
this.echo(command);
}, {
greetings: 'Test',
name: 'Test',
}
);
terminal_print = function(str) {
terminal.echo(str);
};#leftside,
#rightside {
height: 50vh;
width: 100%;
}
@media screen and (min-width:768px) {
#leftside,
#rightside {
height: 100vh;
}
}
#leftside {
background: black;
color: #ddd;
}
#rightside {
background: white;
}<head>
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="row g-0">
<div class="col-md-6 g-0">
<div id="leftside"></div>
</div>
<div class="col-md-6 g-0">
<div id="rightside" class="d-flex justify-content-center align-items-center">
This page is intentionally blank
</div>
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429645.html