springboot怎么把数据传给前端:springboot 如何引入前端 bootstrap？
这种问题网上一搜一大堆，你可以具体找一篇文章试试，遇到问题可以针对相关问题去提问。springboot通过jar包方式引入bootstrap_个人文章 - SegmentFault 思否 这不是查查就
html-footer在内容堆栈溢出的正下方悬停
顺晟科技
2022-10-19 14:26:25
131
我有一个非常简单的html页面，我需要设置。我从这个模板中获得灵感，并进行了编辑，直到它开始满足我的需求，现在我有了以下HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="askStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Watts social</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">Weekly usage</a></p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Did you save some cash? Buy a tree!
</div>
<table>
<td>spent this week</td>
<td>100</td>
</tr>
<tr>
<td>Saved</td>
<td>10</td>
</tr>
<tr>
<td>Yearly spending</td>
<td>20000</td>
</tr>
</table>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<form action="/action_page.php">
<textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well yellow">
<p>Christian Hvidekjær</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 200</span>
<span class="label label-primary">Total KWH</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well green">
<p>Frederik Weis Holst</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well red" >
<p>Carla Sørensen</p>
</div>
</div>
<div class="col-sm-9" >
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
我还添加了自己的小css文件，只是为了补充:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="askStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Watts social</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">Weekly usage</a></p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Did you save some cash? Buy a tree!
</div>
<table>
<td>spent this week</td>
<td>100</td>
</tr>
<tr>
<td>Saved</td>
<td>10</td>
</tr>
<tr>
<td>Yearly spending</td>
<td>20000</td>
</tr>
</table>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<form action="/action_page.php">
<textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well yellow">
<p>Christian Hvidekjær</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 200</span>
<span class="label label-primary">Total KWH</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well green">
<p>Frederik Weis Holst</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well red" >
<p>Carla Sørensen</p>
</div>
</div>
<div class="col-sm-9" >
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
在原始页面（来自we3schools）中，有一个脚注可以到达屏幕的两个角落，但出于某种原因，在我的页面中，它只是底部的一个小文本，漂浮在我的其他内容的正下方:
这对我来说很奇怪，我不知道我做了哪些改变会迫使我这样做。话虽如此，“旧”代码中的页脚也是浮动的，而不是固定在底部，我希望它是。
所以有两件事我遇到了麻烦:
- 使我的页脚作为块到达屏幕的两侧
- 将其固定在底部。
我尝试过的
我尝试了以下这篇文章，删除了我已经存在的页脚类，并创建了以下类:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="askStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Watts social</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">Weekly usage</a></p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Did you save some cash? Buy a tree!
</div>
<table>
<td>spent this week</td>
<td>100</td>
</tr>
<tr>
<td>Saved</td>
<td>10</td>
</tr>
<tr>
<td>Yearly spending</td>
<td>20000</td>
</tr>
</table>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<form action="/action_page.php">
<textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well yellow">
<p>Christian Hvidekjær</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 200</span>
<span class="label label-primary">Total KWH</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well green">
<p>Frederik Weis Holst</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well red" >
<p>Carla Sørensen</p>
</div>
</div>
<div class="col-sm-9" >
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
但这并不奏效。 这篇文章和其他一些文章确实没有做到这一点。
我将非常感谢您的帮助
编辑
未关闭的标签现在已经修复，THX。我也更新了代码。问题仍然存在
编辑2
感谢非常好的输入，帮助我再次支付页脚。 但它仍然漂浮在屏幕中间，我还需要修复它
顺晟科技：
您的HTML有一些错误。例如，您的标签在外部，有些标签根本没有关闭。我修好了那些。并为您添加了这些行。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="askStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Watts social</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">Weekly usage</a></p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Did you save some cash? Buy a tree!
</div>
<table>
<td>spent this week</td>
<td>100</td>
</tr>
<tr>
<td>Saved</td>
<td>10</td>
</tr>
<tr>
<td>Yearly spending</td>
<td>20000</td>
</tr>
</table>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<form action="/action_page.php">
<textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well yellow">
<p>Christian Hvidekjær</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 200</span>
<span class="label label-primary">Total KWH</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well green">
<p>Frederik Weis Holst</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well red" >
<p>Carla Sørensen</p>
</div>
</div>
<div class="col-sm-9" >
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
请参阅此处的完整示例。
这是因为风格而发生的
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="askStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Watts social</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">Weekly usage</a></p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Did you save some cash? Buy a tree!
</div>
<table>
<td>spent this week</td>
<td>100</td>
</tr>
<tr>
<td>Saved</td>
<td>10</td>
</tr>
<tr>
<td>Yearly spending</td>
<td>20000</td>
</tr>
</table>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<form action="/action_page.php">
<textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well yellow">
<p>Christian Hvidekjær</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 200</span>
<span class="label label-primary">Total KWH</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well green">
<p>Frederik Weis Holst</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well red" >
<p>Carla Sørensen</p>
</div>
</div>
<div class="col-sm-9" >
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
但这可能不是一个原因。 它会变形引导样式并更改页脚特性
此外，如果为id#页脚添加样式，则应将其添加到html代码中
这里发生了一些事情，我将为您列出:
在HTML代码中
- 许多未关闭的标记，这导致元素包含在多个标记中
- 您仍然有一个按钮结束标记，但没有关联的开始标记（这是在第68行。我不确定您想要什么，所以保持原样。
在CSS代码中
-
您引用的
- 。表示id，而脚注元素可以简单地引用为。不需要标签。
- 如果用于页脚，它将在屏幕底部加载，并在浏览页面时与内容一起向上滚动。移除这些标记可以解决这个问题。也是不必要的，因为您的元素位于元素之外。
我想这就是一切。这将是值得的，并与您的原始代码进行比较，看看我在哪里清理了一些东西，以及有什么不同，因为我可能遗漏了一些东西（如果是的话，请道歉）。
以下是更新的HTML和CSS！
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="askStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Watts social</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">Weekly usage</a></p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Did you save some cash? Buy a tree!
</div>
<table>
<td>spent this week</td>
<td>100</td>
</tr>
<tr>
<td>Saved</td>
<td>10</td>
</tr>
<tr>
<td>Yearly spending</td>
<td>20000</td>
</tr>
</table>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<form action="/action_page.php">
<textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well yellow">
<p>Christian Hvidekjær</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 200</span>
<span class="label label-primary">Total KWH</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well green">
<p>Frederik Weis Holst</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well red" >
<p>Carla Sørensen</p>
</div>
</div>
<div class="col-sm-9" >
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="askStyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Watts social</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">Weekly usage</a></p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
Did you save some cash? Buy a tree!
</div>
<table>
<td>spent this week</td>
<td>100</td>
</tr>
<tr>
<td>Saved</td>
<td>10</td>
</tr>
<tr>
<td>Yearly spending</td>
<td>20000</td>
</tr>
</table>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<form action="/action_page.php">
<textarea id="w3review" name="w3review" rows="4" cols="50"> Update your status...
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well yellow">
<p>Christian Hvidekjær</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 200</span>
<span class="label label-primary">Total KWH</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well green">
<p>Frederik Weis Holst</p>
</div>
</div>
<div class="col-sm-9">
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well red" >
<p>Carla Sørensen</p>
</div>
</div>
<div class="col-sm-9" >
<div class="well neutral">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
<div class="bottom-left-text">
<span class="label label-default">KWH price: 100</span>
<span class="label label-primary">Total KWH: 200</span>
<span class="label label-success">Labels</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
您有许多标记没有关闭...您应该更加小心。
像这样更改html
- TAG：
相关文章
-
05
2022-12
-
02
2022-12
-
02
2022-12
-
29
2022-11
-
29
2022-11
-
24
2022-11
推荐阅读
随机推荐
- HTML 之简介。。。。。
- bug是什么
- aside是什么意思
- 有哪些 Bootstrap 的学习案例？
- 7种HTML在线编辑器
- 使用HTML5的页面资源预加载功能加快页面加载速度
- [Python]神器:细流 只用Python开发一个运维管理后台(不需要写html js css)
- 验证HTML CSS JavaScript属性页信息(表单验证)
- 批量（文件名）HTML文件转化成jsp文件
- HTML-内部底部白线-堆栈溢出
- CSS-DataTable头覆盖HTML中的选择列表-堆栈溢出
- HTML-滚动到同一页面上的不同部分-堆栈溢出
- JavaScript-如何从字符串中获取所有HTML标记，并将它们添加到数组中，然后在React中加载它们-堆栈溢出
- JavaScript-如何在将选定文本拖放到输入之前进行检测-堆栈溢出
- HTML-在wordpress上自定义一个没有CSS的表？-堆栈溢出
- html-如何使用JavaScript在单击选定的div时更改内容？-堆栈溢出
- JavaScript-Select 2和flatpicker选项显示在下面/上面输入堆栈溢出的顶部
- PHP+HTML多行提交与复选框筛选-堆栈溢出
- JavaScript-HTML从文件获取图像上载-堆栈溢出
- JavaScript-React在useEffect中丢失变量？-堆栈溢出