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>

所以目前我的网页看起来像this。

如何移动我的留言标识，以便徽标和我的验证表格彼此相同？

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发布的答案就应该这样做。

在bootstrap中转移图像

2 个答案: