在引导程序中移动图像

Question

嗨，我知道这是一个业余问题，但我遇到了一些麻烦。

这是我的CSS`：

 body{ background-image: url(street-photography1.jpg); background-size: cover; color: white; background-repeat: no-repeat; background-position:center; background-attachment: fixed; } form{ background-color: rgba(19, 18, 18, 0.66); color: white; padding: 40px; margin-top: 200px; padding-bottom: 60px; } .form-control{ background-color: rgba(14, 14, 14, 0.35); border-radius: 0px; color: white; } .logo1{ padding: 40px; margin-top: 200px; } h1{ text-align: center; } .btn{ width: 100%; 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> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <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]--> <link rel="stylesheet" type="text/css" href="style2.css" /> </head> <body> <div class="container"> <div class="column"> <div class=" col-sm-5"> <img class="logo1" src="images/capture.png" alt=" logo"> </div> </div> <div class="row"> <div class="col-sm-offset-6 col-sm-7"> <form> <h1>Hello, world!</h1> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember Password </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> <footer class="container"> <div class="row"> <p class="col-sm-5"> Copyright © 2016 , Singapore. All rights reserved.</p> </div> </footer> </body> </html>

所以目前我的网页是这样的。

我该如何移动我的消息徽标，以便徽标和验证表单彼此位于同一行？

Answer 1

您可以在一行中紧接两个col div。 即

<div class="row">
  <div class="col-sm-12>
   <div class="row">
     <div class="col-sm-6>...Logo...
     <div class="col-sm-6>...Form...
     </div>
     </div>
  </div>
</div>

Answer 2

如果要垂直对齐，请尝试将col-sm-offset-6到徽标容器中。

<div class="col-sm-offset-6 col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>

或者，如果您希望它们水平对齐，则@DPalmquist发布的答案应该可以解决。

在引导程序中移动图像

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-07-04 17:21:36

解决方案2
0 2017-07-04 17:28:49

在引导程序中移动图像

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-07-04 17:21:36

解决方案2 0 2017-07-04 17:28:49

解决方案1
0 已采纳 2017-07-04 17:21:36

解决方案2
0 2017-07-04 17:28:49