gpt4 book ai didi

html - 没有导航栏 Bootstrap 的网站 Logo

转载 作者:可可西里 更新时间:2023-11-01 13:06:02 25 4
gpt4 key购买 nike

我目前正在制作一个网站,我不想在其中设置导航栏,但我希望我的 Logo 位于左上角。当我从移动设备加入时,我希望它位于一个框上方的中间。看下面的代码...

这就是我所做的,它几乎完成了,但我对网格系统的工作方式感到困惑。查看我的代码:

<!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>

Website preview

最佳答案

左上角

将您的 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;
}

}

它应该可以工作。

关于html - 没有导航栏 Bootstrap 的网站 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33045745/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com