0
こんにちは、これはアマチュアの質問ですが、何か問題があります。ブートストラップで画像の周りを移動する
これは私のCSS`です：
body{
\t background-image: url(street-photography1.jpg);
\t background-size: cover;
\t color: white;
\t background-repeat: no-repeat;
\t background-position:center;
\t background-attachment: fixed;
}
form{
\t background-color: rgba(19, 18, 18, 0.66);
\t color: white;
\t padding: 40px;
\t margin-top: 200px;
\t padding-bottom: 60px;
}
.form-control{
\t background-color: rgba(14, 14, 14, 0.35);
\t border-radius: 0px;
\t color: white;
}
.logo1{
\t padding: 40px;
\t margin-top: 200px;
\t
\t
}
h1{
\t text-align: center;
}
.btn{
\t width: 100%;
\t margin-top: 20px;
}<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
\t <!-- Latest compiled and minified CSS -->
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
\t <!-- Optional theme -->
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
\t <!-- Latest compiled and minified JavaScript -->
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
\t \t
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
\t <link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
\t <div class="container">
\t <div class="column">
\t <div class=" col-sm-5">
\t <img class="logo1" src="images/capture.png" alt=" logo">
\t </div>
\t </div>
\t \t
\t <div class="row">
\t
\t \t \t <div class="col-sm-offset-6 col-sm-7">
\t \t \t
\t \t \t \t <form>
\t \t \t \t \t <h1>Hello, world!</h1>
\t \t \t \t <div class="form-group">
\t \t \t \t \t <label for="exampleInputEmail1">Email address</label>
\t \t \t \t \t <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
\t \t \t \t </div>
\t \t \t \t <div class="form-group">
\t \t \t \t \t <label for="exampleInputPassword1">Password</label>
\t \t \t \t \t <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="checkbox">
\t \t \t \t \t <label>
\t \t \t \t \t <input type="checkbox"> Remember Password
\t \t \t \t \t </label>
\t \t \t \t </div>
\t \t \t \t <button type="submit" class="btn btn-default">Submit</button>
\t \t \t \t </form>
\t \t \t \t
\t \t \t </div>
\t \t </div>
\t \t <footer class="container">
<div class="row">
<p class="col-sm-5">
\t \t \t \t \t \t Copyright © 2016 , Singapore. All rights reserved.</p>
</div>
</footer>
\t
</body>
</html>だから、現在、私のWebページがthisのように見えます。
ロゴと私の検証フォームが同じ行になるようにメッセージロゴをシフトするにはどうすればよいですか？
こんにちは、こんにちは、スタックオーバーフローを歓迎します。ここで（あなたの最初のバッジを得るために）あなたの道を知るために[ウェルカムツアー]（https://stackoverflow.com/tour） [Minimal、Complete、Verifiableの例]（https://stackoverflow.com/help/mcve）の作成方法と[よくある質問を表示する方法]（https://stackoverflow.com/help/how-to）もチェックしてください。あなたがあなたのチャンスを増やし、フィードバックと有用な答えを得ることができます。 – DarkCygnus
まず、Bootstrapを使用する場合、ロゴとフォームを1つの行に配置する必要があります。ブートストラップグリッドについて詳しくは、https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp –