我想在引导程序中将这些输入文本框精确放置在图像上。这些输入文本框将相对于背景中的图像和彼此进行定义。到目前为止，我已经能够为容器添加背景图像并在其上放置输入文本字段，但根据上述标准的放置是一个问题。请帮忙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wiredeiki App </title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body data-spy="scroll" data-target="#my-navbar">
<script type='text/javascript'>
$(document).ready(function(){
$('#check_generator').css({'background-image': 'yellow'});
});
</script>
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">Wiredwiki</a>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<a href="" class="btn btn-warning navbar-btn navbar-right">Download Now</a>
<ul class="nav navbar-nav">
<li><a href="#feedback">Feedback</a>
<li><a href="#gallery">Gallery</a>
<li><a href="#features">Features</a>
<li><a href="#faq">Faq</a>
<li><a href="#contact">ContactUs</a>
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
<!-- jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Print Online Checks for Free</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consectetur </p>
<div class="btn-group">
<a href="" class="btn btn-lg btn-primary">Download App</a>
<a href="" class="btn btn-lg btn-success">Spread the word</a>
</div>
</div><!-- End container -->
</div><!-- End jumbotron-->
<!-- call to action -->
<!-- Gallery -->
<div class="container">
<section>
<div class="page-header" id="gallery">
<h2>Gallery.<small> Check out the Awesome Gallery</small></h2>
</div>
<div class="carousel slide" id="screenshot-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li>
<li data-target="#screenshot-carousel" data-slide-to="1"></li>
<li data-target="#screenshot-carousel" data-slide-to="2"></li>
<li data-target="#screenshot-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="highway.jpg" alt="Text of the image">
<div class="carousel-caption">
<h3>Highway heading</h3>
<p>This is the caption</p>
</div>
</div>
<div class="item">
<img src="river.jpg" alt="Text of the image">
<div class="carousel-caption">
<h3>River heading</h3>
<p>This is the caption</p>
</div>
</div>
<div class="item">
<img src="street.jpg" alt="Text of the image">
<div class="carousel-caption">
<h3>Street heading</h3>
<p>This is the caption</p>
</div>
</div>
<div class="item">
<img src="painting.jpg" alt="Text of the image">
<div class="carousel-caption">
<h3>Painting heading</h3>
<p>This is the caption</p>
</div>
</div>
</div><!-- End Carousel inner -->
<a href="#screenshot-carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#screenshot-carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- End Carousel -->
</section>
</div>
<!-- features -->
<div class="container" id = "check_generator" onload="colorize()">
<input type="text" id="usr">
</div><!-- End Container -->
<!-- features -->
<div class="container">
<section>
<div class="page-header" id="features">
<h2>Features.<small> Some of the coolest Features of this app.</small></h2>
</div><!-- End Page Header -->
<div class="row">
<div class="col-sm-8">
<h3>This is the heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa. Proin et odio mattis, venenatis lacus vel, faucibus elit</p>
</div>
<div class="col-sm-4">
<img src="imac.jpg" class="img-responsive" alt="image">
</div>
</div><!-- End row -->
<div class="row">
<div class="col-sm-8">
<h3>This is the heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa. Proin et odio mattis, venenatis lacus vel, faucibus elit</p>
</div>
<div class="col-sm-4">
<img src="smartphone.jpg" class="img-responsive" alt="image">
</div>
</div>
<div class="row">
<div class="col-sm-8">
<h3>This is the heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa. Proin et odio mattis, venenatis lacus vel, faucibus elit</p>
</div>
<div class="col-sm-4">
<img src="user.jpg" class="img-responsive" alt="image">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-ok"></span>
<h4>This is the Heading</h4>
<p>Nam velit est, tempor vel posuere et, auctor a lectus. Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit lacus, suscipit accumsan augue tellus vitae dolor. Morbi in euismod dui</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-star"></span>
<h4>This is the Heading</h4>
<p>Nam velit est, tempor vel posuere et, auctor a lectus. Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit lacus, suscipit accumsan augue tellus vitae dolor. Morbi in euismod dui</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-play-circle"></span>
<h4>This is the Heading</h4>
<p>Nam velit est, tempor vel posuere et, auctor a lectus. Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit lacus, suscipit accumsan augue tellus vitae dolor. Morbi in euismod dui</p>
</div>
</div>
</div>
</div><!-- end row -->
</section>
</div><!-- End Container -->
<!-- Faq -->
<div class="container">
<section>
<div class="page-header" id="faq">
<h2>FAQ.<small> Engaging with consumers.</small></h2>
</div><!-- End Page Header -->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-1" data-toggle="collapse" data-parent="#accordion">
Question one?
</a>
</div><!-- End panel title -->
<div id="collapse-1" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas non urna in fringilla. Praesent consequat est at feugiat faucibus
</div>
</div><!-- End Panel collapse -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-2" data-toggle="collapse" data-parent="#accordion">
Question Two?
</a>
</div><!-- End panel title -->
<div id="collapse-2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas non urna in fringilla. Praesent consequat est at feugiat faucibus
</div>
</div><!-- End Panel collapse -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-3" data-toggle="collapse" data-parent="#accordion">
Question Three?
</a>
</div><!-- End panel title -->
<div id="collapse-3" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas non urna in fringilla. Praesent consequat est at feugiat faucibus
</div>
</div><!-- End Panel collapse -->
</div>
</div>
</div><!-- End panel group -->
</section>
</div><!-- End container -->
<!-- Contact -->
<div class="container">
<section>
<div class="page-header" id="contact">
<h2>Contact Us.<small> Contact us for more.</small></h2>
</div><!-- End Page Header -->
<div class="row">
<div class="col-lg-4">
<p>Send us a message, or contact us from the address below</p>
<address>
<strong>Wiredwiki Pvt Ltd.</strong></br>
111, Malviya nagar </br>
Plot no. 45</br>
New delhi - 110017</br>
P: +91 9999999999
</address>
</div>
<div class="col-lg-8">
<form action="" class="form-horizontal">
<div class="form-group">
<label for="user-name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-name" placeholder="Enter you name">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="user-email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-email" placeholder="Enter you Email Address">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="user-url" class="col-lg-2 control-label">Your Website</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-email" placeholder="If you have Any.">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="user-message" class="col-lg-2 control-label">Any Message</label>
<div class="col-lg-10">
<textarea name="user-message" id="user-message" class="form-control"
cols="20" rows="10" placeholder="Enter your Message"></textarea>
</div>
</div><!-- End form group -->
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div><!-- End the row -->
</section>
</div>
<!-- Feedback-->
<div class="container">
<section>
<div class="page-header" id="feedback">
<h2>Feedback.<small> Check out the Awesome Feedback</small></h2>
</div>
<div class="row">
<div class="col-md-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida quam ac ante rutrum, in mollis ligula mattis. Integer nulla nisi, ullamcorper et posuere vel</p>
<footer>John doe</footer>
</blockquote>
</div>
<div class="col-md-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida quam ac ante rutrum, in mollis ligula mattis. Integer nulla nisi, ullamcorper et posuere vel</p>
<footer>John doe</footer>
</blockquote>
</div>
<div class="col-md-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida quam ac ante rutrum, in mollis ligula mattis. Integer nulla nisi, ullamcorper et posuere vel</p>
<footer>John doe</footer>
</blockquote>
</div>
</div><!-- End row -->
</section>
</div><!--End Container-->
<section>
<div class="well">
<div class="container text-center">
<h3>Subscribe for more free stuff</h3>
<p>Enter your name and email</p>
<form action="" class="form-inline">
<div class="form-group">
<label for="subscription">Subscribe</label>
<input type="text" class="form-control" id="subscription" placeholder="Your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="Enter your Email">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
<hr>
</form>
</div><!-- end Container-->
</div><!-- end well-->
</section><!-- Call to action -->
<!-- Footer -->
<footer>
<hr>
<div class="container text-center">
<h3>Subscribe for more free stuff</h3>
<p>Enter your name and email</p>
<form action="" class="form-inline">
<div class="form-group">
<label for="subscription">Subscribe</label>
<input type="text" class="form-control" id="subscription" placeholder="Your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="Enter your Email">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
</form>
<hr>
<ul class="list-inline">
<li><a href="http://www.twitter.com/wiredwiki">Terms and Conditions</a></li>
</ul>
<p>© Copyright @ 2015</p>
</div><!-- end Container-->
</footer>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>
答案 0 :(得分：0)
我知道你引用了bootstrap的默认样式表，但是首先需要了解一些事情。为了根据你自己的喜好操纵bootstrap中任何东西的位置或外观，你必须制作一个自定义样式表，然后确保它在你的引导样式表之后被引用，这样bootstrap不会否定你的样式。然后你必须知道足够的css，以便根据你的喜好改变你的风格。您目前正在使用javascript将背景图片放置在语义上不正确的div中。这是一个解释基础知识的链接，但是你真的需要了解更多关于css的知识，以便用bootstrap完成你想要的东西。 http://bootstrapbay.com/blog/customize-bootstrap/