Javascript 保持两个表单的内联
我目前正试图解决分配给我的一项学校作业，但我正在努力解决一个相当简单的问题 我试图将一个简单的html和js计算器以及一个json表放在同一行中，但我还没有做到这一点，我已经尝试了一段时间。我只留下下面的html代码，因为问题在那里，而不是在脚本中。谢谢你的帮助！ PS.使用引导Javascript 保持两个表单的内联,javascript,html,css,json,Javascript,Html,Css,Json,我目前正试图解决分配给我的一项学校作业，但我正在努力解决一个相当简单的问题 我试图将一个简单的html和js计算器以及一个json表放在同一行中，但我还没有做到这一点，我已经尝试了一段时间。我只留下下面的html代码，因为问题在那里，而不是在脚本中。谢谢你的帮助！ PS.使用引导 <html lang="en"> <head> <title>Página de teste BOOSTRAP</title> <
<html lang="en">
<head>
<title>Página de teste BOOSTRAP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css" />
<style>
.page-footer {
background-color: #222;
color: #ccc;
padding: 60px 0 30px;
}
.footer-copyright {
color: #666;
padding: 40px 0;
}
#tabela {
height: 100%;
width:50%;
}
#Calc {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="description">
<h1>Bem-vindo à minha Landing Page!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.
</p>
</div>
</header>
<form name="Calculadora">
<div id="display" class="row mt-5 mb-5 ml-1 mr-1">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<table id="Calc" width="100%" class="table">
<tbody>
<tr><td colspan="4"><input type="text" id="resultados" class="form-control" /></td></tr>
<tr><td><button type="button" class="btn btn-secondary" onclick="addVal(7);">7</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(8);">8</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(9);">9</button></td><td><button type="button" class="btn btn-primary" onclick="addOperation('+');">+</button></td></tr>
<tr><td><button type="button" class="btn btn-secondary" onclick="addVal(4);">4</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(5);">5</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(6);">6</button></td><td><button type="button" class="btn btn-primary" onclick="addOperation('-');">-</button></td></tr>
<tr><td><button type="button" class="btn btn-secondary" onclick="addVal(1);">1</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(2);">2</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(3);">3</button></td><td><button type="button" class="btn btn-primary" onclick="addOperation('*');">*</button></td></tr>
<tr><td colspan="1"></td><td><button type="button" class="btn btn-secondary" onclick="addVal(0);">0</button></td><td><button type="button" class="btn btn-primary" OnClick="addOperation('C');">C</button></td><td><button type="button" class="btn btn-primary" onclick="addOperation('/');">/</button></td></tr>
<tr><td colspan="4"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="calculate();">=</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>
<form name="tabela">
<div class="table">
<table class="table table-bordered" id="tabela" data-height="460">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
</form>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<p>
1640 Riverside Drive, Hill Valley, California
<br />info@mywebsite.com
<br />+ 01 234 567 88
<br />+ 01 234 567 89
</p>
</div>
</div>
</div>
<div class="footer-copyright text-center">© 2020 Copyright: MyWebsite.com</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>
<script src="script.js"></script>
<script src="dadostabelas.js"></script>
</body>
</html> ```
佩吉纳·德特斯特布斯特拉普酒店
.页脚{
背景色：#222；
颜色：#ccc；
填充：60px 0 30px；
}
.footer版权所有{
颜色：#666；
填充：40px0；
}
#塔贝拉{
身高：100%；
宽度：50%；
}
#计算{
身高：100%；
宽度：100%；
}
-
-
-
-
搜寻
Bem vindoáminha登录页！
Lorem ipsum dolor sit amet，是一位杰出的献身者。我们之间的关系，我们之间的关系。我是一位智者，我是一位智者。在pharetra sem ullamcorper中，我的自由女神弗林蒂利亚。
789+
456-
123*
0C/
=
项目ID
项目名称
项目价格
特殊头衔待遇
具有以下支持文本，作为附加内容的自然引入
特殊头衔待遇
具有以下支持文本，作为附加内容的自然引入
补充资料
Lorem ipsum dolor sit amet，是一位杰出的献身者。我们之间的关系，我们之间的关系。我是一位智者，我是一位智者
Lorem ipsum dolor sit amet，是一位杰出的献身者。我们之间的关系，我们之间的关系。我是一位智者，我是一位智者
接触
加利福尼亚州希尔谷河滨大道1640号
info@mywebsite.com
+01234 567 88
+01234 567 89
©2020版权所有：MyWebsite.com
```
行列sm<div class="row">
<div class="col-sm">
Left side
</div>
<div class="col-sm">
Right side
</div>
</div>
左侧
右侧