2
我正试图将日历分区和Notities分区向上移动。但我似乎无法弄清楚，而不破坏布局。如何移动到靠近中央分区（column-md-8）旁边的元素？
我试了一下：
移动日历师一个师低于该Waarschuwing分的。这样日历部门去我想要的地方。但是这会在传奇部门和客户名单部门之间造成相当大的差距。
这就是我想要做的事：
我的代码：
<?php
include('session.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bravo Portal</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Responsive slider -->
<link href="css/responsive-calendar.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
<style type="text/css">
table.scroll {
width: 100%;
border-spacing: 0;
border: 1px solid grey;
}
table.scroll th,
table.scroll td,
table.scroll tr,
table.scroll thead,
table.scroll tbody { display: block; }
table.scroll thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
table.scroll tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 19%;
float: left;
border-right: 0px solid grey;
}
thead tr th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}
table td.green{
background: green;
}
table td.red{
background: red;
}
table td.orange{
background: orange;
}
tbody { border-top: 2px solid black; padding-bottom: 50%; }
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
#hoverTable{
width:100%;
border-collapse:collapse;
}
#hoverTable td{
}
/* Define the default color for all the table rows */
#hoverTable tr{
}
/* Define the hover highlight color for the table row */
#hoverTable tr:hover {
background-color: #ffff99;
}
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
display: inline-block;
font-size: 80%;
list-style: none;
line-height: 18px;
vertical-align: text-top;
}
.my-legend ul.legend-labels li span {
display: inline-block;
height: 16px;
width: 20px;
margin-right: 5px;
margin-left: 10px;
border: 1px solid #999;
}
.my-legend a {
color: #777;
}
/*notities*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
/* body {
font: normal normal 13px/16px "Open Sans", sans-serif;
background: #ccc;
} */
.contain{
width: 300px;
border-radius: 3px;
}
form {
display: inline-block;
}
input{
padding: 1px 1px 1px 1px;
}
#button1{
display: inline-block;
background-color:#fc999b;
color:#ffffff;
border-radius: 1px;
text-align:center;
margin-top:1px;
padding: 3px 3px;
}
#button1:hover{
cursor: pointer;
opacity: .8;}
ol {padding-left: 20px;}
ol li {padding: 5px;color:#000;}
ol li:nth-child(even){background: #70ABAF;}
.strike{text-decoration: line-through;}
li:hover{
cursor: pointer;
}
/*notities*/
a{
color: black;
}
</style>
</head>
<body style="background-color: #70ABAF;">
<!-- BEGIN HEADER -->
<header class="navbar navbar-default navbar-static-top" role="banner" style="background-color: #32292F; color: #99E1D9;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">Bravo Portal</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="portal.php">Hoofdpagina</a>
</li>
<li>
<a href="patients.php">Cliënten</a>
</li>
</ul>
<div align="right" style="padding-top: 1%;">
<b id="welcome">Welkom: <i style="color: #ADADFF;"><?php echo $login_session; ?></i></b>
<b id="logout"><a href="../logout.php">Uitloggen</a></b>
</div>
</nav>
</div>
</header>
<!-- END HEADER -->
<div class="container">
<div class="row">
<!-- WAARSCHUWWING -->
<div class="col-md-8" style="border-style: solid; color: #99E1D9;">
<div style=" padding-top: 2%; padding-bottom: 2%;">WAARSCHUWINGEN<small class="fa fa-cog fa-spin fa-1x fa-fw" style="color: #705D56;"></small></div>
<!-- <hr style="padding: 0%; margin: 0%;"> -->
<!-- Begin Gevallen -->
<div class="col-md-6" style="color: #705D56; margin-bottom: 0%; padding-bottom: 0%;">
<p>Rode Status Geval</p>
</div>
<div class="col-md-6" style="color: #705D56;">
<p>Oranje Status Geval</p>
</div>
<!-- End Gevallen -->
<!-- Show Record -->
<div style="height:90px; overflow:auto; margin-bottom: 1%; border: solid 0px #705D56; padding-top: 0%; margin-top: 0%;" class="col-md-6">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "patientdb";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT naam FROM clients WHERE status > '60'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<a href='patients.php'>";
echo "" . $row["naam"]."</a><br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</div>
<!-- Show Record -->
<div style="height:90px; overflow:auto; margin-bottom: 1%; border: solid 0px #705D56;" class="col-md-6">
<!-- show records -->
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "patientdb";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT naam FROM clients WHERE status > '58' AND status < '60'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<a href='patients.php'>";
echo "" . $row["naam"]."</a><br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</div>
<!-- end show record -->
</div>
<!--END WAARSCHUWING -->
<!-- BEGIN LEGEND -->
<div class='my-legend' style="clear: both; padding-top: 0%; margin-top: 0%;">
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:green;'></span></li>
<li>Goed</li>
<li><span style='background:yellow;'></span></li>
<li>Minder goed</li>
<li><span style='background:orange;'></span></li>
<li>Matig</li>
<li><span style='background:red;'></span></li>
<li>Slecht</li>
</ul>
</div>
</div>
<!-- END LEGEND -->
<!-- BEGIN CLIENT LIST -->
<div class="col-md-8" style=" padding-top: 2%; padding-left: 0%; clear: both;">
<h4 style="color: #99E1D9;"> Cliënten Lijst</h4>
<!-- Begin Scroll List -->
<div>
<table class="scroll">
<thead style="background-color: #99E1D9; color: #705D56;">
<tr>
<th>ID</th>
<th>Naam Client</th>
<th>Laatste Update</th>
<th style="margin-left: 21%; padding-left: 0%;">Status</th>
</tr>
</thead>
<tbody id="hoverTable" style="font-size: 11pt;">
<?php
//connect ot database
$connection = mysql_connect('localhost', 'root', '');
mysql_select_db('patientdb');
//get data from data base for the first three columns in the table.
$query = "SELECT id, naam, datum, status FROM clients";
$result = mysql_query($query);
//fetch results per row into the table.
while($row = mysql_fetch_array($result)){ //Loop through results
echo "<tr>
<td>" . $row['id'] . "</td>
<td>" . $row['naam'] . "</td>
<td>" . $row['datum'] . "</td>
<td style='padding-left: 20%;'>";
// check of the data from 'status' per condition and assign it a color.
if ($row['status'] > 60 && $row['status'] < 70) {
echo "<p class='fa fa-circle' style='color: red;''></p>";
} elseif ($row['status'] > 58 && $row['status'] < 60) {
echo "<p class='fa fa-circle' style='color: orange;''></p>";
} elseif ($row['status'] > 55 && $row['status'] < 57) {
echo "<p class='fa fa-circle' style='color: yellow;''></p>";
} else{
echo "<p class='fa fa-circle' style='color: green;''></p>";
}
echo "</td>
</tr>";
}
//close database connection
mysql_close();
?>
</tbody>
</table>
</div>
<!-- End Scroll List -->
</div>
<!-- END BEGIN CLIENT LIST -->
<!-- BEGIN CALENDER -->
<div class="col-md-3" style="padding-left: 4%; padding-top: 0%; padding-bottom: 0%; margin-top: 0%;" >
<div class="responsive-calendar">
<div class="controls">
<a class="pull-left" data-go="prev"><div class="btn btn-primary" style="background-color: #705D56; color: #99E1D9; "><</div></a>
<h4><span data-head-year></span> <span data-head-month></span></h4>
<a class="pull-right" data-go="next"><div class="btn btn-primary" style="background-color: #705D56; color: #99E1D9;">></div></a>
</div><hr/>
<div class="day-headers">
<div class="day header">Ma</div>
<div class="day header">Di</div>
<div class="day header">Wo</div>
<div class="day header">Do</div>
<div class="day header">Vr</div>
<div class="day header">Za</div>
<div class="day header">Zo</div>
</div>
<div class="days" data-group="days">
</div>
</div>
<div>
<!-- END CALENDER -->
<!-- BEGIN Notities -->
<div class="contain" class="col-md-4" style="padding-left: 4%;">
<h5 style="color: #99E1D9;">Notities</h5>
<p><em></em></p>
<form name="toDoList">
<input type="text" name="ListItem"/>
</form>
<div style="background-color: #705D56;" id="button1">voeg toe</div>
<br/>
<div style="height: 70px; width: 77%; overflow: auto; border: solid 1px #99E1D9;" >
<ol></ol>
</div>
</div>
<!-- END Notities -->
</div>
</div>
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Notities -->
<script type="text/javascript">
$(document).ready(
function(){
$('#button1').click(
function(){
var toAdd = $('input[name=ListItem]').val();
$('ol').append('<li style="list-style-type:square">' + toAdd + '</li>');
});
$("input[name=ListItem]").keyup(function(event){
if(event.keyCode == 13){
$("#button1").click();
}
});
$(document).on('dblclick','li', function(){
$(this).toggleClass('strike').fadeOut('slow');
});
$('input').focus(function() {
$(this).val('');
});
$('ol').sortable();
}
);
</script>
<script src="js/scripts.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/responsive-calendar.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".responsive-calendar").responsiveCalendar({
time: '2017-01',
events: {
"2017-01-11": {"number": 5, "url": "https://calendar.google.com/calendar/render?pli=1#main_7"},
"2017-01-26": {"number": 1, "url": "https://calendar.google.com/calendar/render?pli=1#main_7"},
"2017-02-03":{"number": 1},
"2017-02-12": {}}
});
});
</script>
</body>
</html>
在上我看到添加到'cols'很多有垫衬％的代码的第一个概述，不建议在Bootstrap中做这样的事情，因为真的很难匹配列。我会再次重组网格。 – Troyer
@Benzay我不想用黄色箭头掩盖kalender。但我的意思是描述黄箱需要仍然在kalender之下，但更高。 – user7186746
@Troyer我对这一切都很陌生，随时随地学习。 – user7186746