内容无法正确对齐
我需要将html中的一列中的内容对齐，如图所示。但是由于某种原因，即使使用正确的代码，它也对我不起作用。它不是远离图像，而是远离图像。谁能告诉我我的错误在哪里或我在做什么错？以下是代码和外观的图片。将不胜感激！ Here is the link to the github和图片：
/* body { padding-top: 70px; } */
html, body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {
}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="pageOne.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
<a href="#" class="navbar-link">Login or Create new account</a>
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="pageTwo.html"><span class="glyphicon glyphicon-user">My Account</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-gift">Wish List</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-arrow-right">Checkout</span></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Art Store</h1>
</div>
<div class="col-md-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Art Work</a></li>
<li><a href="#">Artists</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By <a href="#">Elisabeth Louise Vigée Le Brun</a></p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="images/art/113010.jpg"><img src="images/art/113010-m.jpg" class="img-thumbnail img-responsive" /></a>
</div>
<div class="col-md-7">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-gift">Add to Wish List</span></a>
</button>
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-shopping-cart">Add to Shopping Cart</span></a>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td><a href="#">National Gallery, London</a></td>
</tr>
<tr>
<th>Genres:</th>
<td><a href="#">Realism</a>, <a href="#">Rococo</a></td>
</tr>
<tr>
<th>Subjects:</th>
<td><a href="#">People</a>, <a href="#">Arts</a></td>
</tr>
</table>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText"><a href="#">Artist Holding a Thistle</a></p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText"><a href="#">Self-portrait in a Straw Hat</a></p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">Edit</span></button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right">Checkout</span></button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Caravaggio</a></li>
<li><a href="#">Cezanne</a></li>
<li><a href="#">Matisse</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Picasso</a></li>
<li><a href="#">Raphael</a></li>
<li><a href="#">Van Gogh</a></li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Baroque</a></li>
<li><a href="#">Cubism</a></li>
<li><a href="#">Impressionism</a></li>
<li><a href="#">Renaissance</a></li>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li><a href="#">Delivery Inforomation</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Arrangement in Grey and Black</a></p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
2 个答案:
答案 0 :(得分：2)
下面的row-col div进行了一些更改，这些代码段可能是解决您的问题的方法。 （尽管缺少图像，但它与您发布的屏幕截图非常接近。）
/* body { padding-top: 70px; } */
html,
body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="pageOne.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
<a href="#" class="navbar-link">Login or Create new account</a>
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="pageTwo.html"><span class="glyphicon glyphicon-user">My Account</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-gift">Wish List</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-arrow-right">Checkout</span></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Art Store</h1>
</div>
<div class="col-md-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Art Work</a></li>
<li><a href="#">Artists</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By <a href="#">Elisabeth Louise Vigée Le Brun</a></p>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="row">
<div class="col-md-5">
<a href="images/art/113010.jpg"><img src="images/art/113010-m.jpg" class="img-thumbnail img-responsive" /></a>
</div>
<div class="col-md-7">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in
Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-gift">Add to Wish List</span></a>
</button>
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-shopping-cart">Add to Shopping Cart</span></a>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td><a href="#">National Gallery, London</a></td>
</tr>
<tr>
<th>Genres:</th>
<td><a href="#">Realism</a>, <a href="#">Rococo</a></td>
</tr>
<tr>
<th>Subjects:</th>
<td><a href="#">People</a>, <a href="#">Arts</a></td>
</tr>
</table>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText"><a href="#">Artist Holding a Thistle</a></p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText"><a href="#">Self-portrait in a Straw Hat</a></p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">Edit</span></button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right">Checkout</span></button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Caravaggio</a></li>
<li><a href="#">Cezanne</a></li>
<li><a href="#">Matisse</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Picasso</a></li>
<li><a href="#">Raphael</a></li>
<li><a href="#">Van Gogh</a></li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Baroque</a></li>
<li><a href="#">Cubism</a></li>
<li><a href="#">Impressionism</a></li>
<li><a href="#">Renaissance</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li><a href="#">Delivery Inforomation</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Arrangement in Grey and Black</a></p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
希望这会有所帮助。如果有帮助，请不要忘记将其标记为答案。 （以全屏模式运行代码段） 谢谢。 ：）
答案 1 :(得分：0)
只需将您的引导程序列变成col-md-4,col-md-6,col-md-2，即可看到同一行。并且也总是使用图标<span class="glyphicon glyphicon-gift"></span> Add to Wish List之后的文本。我希望这个解决方案会有所帮助。
/* body { padding-top: 70px; } */
html,
body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
<a href="#" class="navbar-link">Login or Create new account</a>
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="pageTwo.html"><span class="glyphicon glyphicon-user">My Account</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-gift">Wish List</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-arrow-right">Checkout</span></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>Art Store</h1>
</div>
<div class="col-sm-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Art Work</a></li>
<li><a href="#">Artists</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By <a href="#">Elisabeth Louise Vigée Le Brun</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="images/art/113010.jpg"><img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" /></a>
</div>
<div class="col-md-6">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-gift"></span> Add to Wish List</a>
</button>
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Shopping Cart</a>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td><a href="#">National Gallery, London</a></td>
</tr>
<tr>
<th>Genres:</th>
<td><a href="#">Realism</a>, <a href="#">Rococo</a></td>
</tr>
<tr>
<th>Subjects:</th>
<td><a href="#">People</a>, <a href="#">Arts</a></td>
</tr>
</table>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/300" width="41"></a>
<div class="media-body">
<p class="cartText"><a href="#">Artist Holding a Thistle</a></p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/300" width="41"></a>
<div class="media-body">
<p class="cartText"><a href="#">Self-portrait in a Straw Hat</a></p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>Edit</button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right"></span>Checkout</button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Caravaggio</a></li>
<li><a href="#">Cezanne</a></li>
<li><a href="#">Matisse</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Picasso</a></li>
<li><a href="#">Raphael</a></li>
<li><a href="#">Van Gogh</a></li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Baroque</a></li>
<li><a href="#">Cubism</a></li>
<li><a href="#">Impressionism</a></li>
<li><a href="#">Renaissance</a></li>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li><a href="#">Delivery Inforomation</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Arrangement in Grey and Black</a></p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？