我正在制作一个我不想要导航栏的网站，但我希望我的徽标位于左上角。当我从移动设备加入时，我希望它位于一个盒子的中间位置。请参阅下面的代码......
这就是我所做的，而且差不多完成了，但我对网格系统的工作方式感到困惑。 看看我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<meta name="description" content="">
<meta name="author" content="">
<title>Testing Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Bootstrap Core CSS -->
<style>
/* CSS used here will be applied after bootstrap.css */
html{
height:100%;
min-height:100%;
}
body {
background: url('assets/img/4777.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
}
.panel-default {
opacity: 0.95;
margin-top:50px;
}
.form-group.last {
margin-bottom:0px;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-1">
<img src="assets/img/tei.png" class="img-responsive" alt="Responsive image">
</div>
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label class="">
<input type="checkbox" class="">Να με θυμάσαι</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
答案 0 :(得分：2)
将您的HTML更改为
<div id="logo-container" class="col-md-4 col-md-offset-1">
<img src="assets/img/tei.png" class="img-responsive" alt="Responsive image">
</div>
<div class="container">
<div class="row">
将此添加到CSS：
@media all and (max-width: 768px){
#logo-container{
text-align:center;
}
#logo-container .img-responsive{
display:inline !important;
}
}
它应该有用。
答案 1 :(得分：1)
根据您想要图像的左角多远，可以调整边距/填充：我留下了一些空间。
html {
height: 100%;
min-height: 100%;
}
body {
background: url('assets/img/4777.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
.panel-default {
opacity: 0.95;
margin-top: 50px;
}
.form-group.last {
margin-bottom: 0px;
}
div.logo {
margin-left: 20px;
}
@media (max-width: 992px) {
div.logo {
text-align: center;
margin-left: 0;
}
div.logo .img-responsive {
display: inline-block;
}
}
@media (max-width: 480px) {
div.logo {
padding: 10px;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="logo" class="col-xs-4 col-xs-offset-1">
<img src="http://79.170.44.145/irem.co.vu/test-ptx/assets/img/tei.png" class="img-responsive" alt="Responsive image">
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-1"></div>
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label class="">
<input type="checkbox" class="">Να με θυμάσαι</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>