0
Я не уверен, как разместить изображение в правильном месте. Я использую шаблон пользовательского блога bootstrap, и я пытаюсь немного изменить его, чтобы он выглядел так, как я хочу.Как разместить изображение в определенном месте в бутстрапе?
Я хочу поместить изображение в положение синего прямоугольника с левой стороны, как показано на рисунке ниже. Здесь я пробовал пару разных вещей, но мои изображения сохраняют рендеринг прямо под заголовком блога «Блог Bootstrap», чего я не хочу. Я пробовал использовать
class="col-sm-offset-1"
Но чем больше я увеличиваю смещение, это просто перемещает изображение справа от экрана. Я не могу заставить его уйти далеко влево. Как я могу это сделать, не теряя автомасштабирование автозагрузки для разных размеров экрана?
Вот мой base.html файл:
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
{% load staticfiles %}
<title>Blog Title</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Global blog css for custom defined parameters -->
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="{% url 'blog:index' %}">Home</a>
<a class="blog-nav-item" href="{% url 'about:index' %}">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Code'N Cofee Blog</h1>
<p class="lead blog-description">Live and write code. </p>
</div>
<!-- place image on page -->
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<img src="{% static 'media/Pic3.jpg' %}" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<!-- blog post goes here -->
{% block content %}
{% endblock %}
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</div><!-- /.blog-main -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
А вот мой blog.css файл:
/*
* Globals
*/
body {
font-family: 'Source Sans Pro', Georgia, "Times New Roman", Times, sans-serif;
color: #555;
background-color: ghostwhite;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
@media (min-width: 1200px) {
.container {
width: 970px;
}
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*
float image to left
*/
.pull-left {
float: left !important;
}
#swoosh {
padding-left: 0;
}
Спасибо за вашу помощь, Nermin
Можете ли вы предоставить [минимальный, полный и проверяемый пример] (http://stackoverflow.com/help/mcve)? Мы не можем быть уверены, какие параметры вы передаете. –
вы используете 3 столбца, как показано на рисунке выше, потому что я получаю от вашего кода, что вы используете 2 столбца внутри 1 контейнера, однако вы создаете две строки, которые не добавляется до 12. Вы закончили свою первую строку с 4, но вы не являетесь заголовком внутри этой строки, так что вы рисуете снизу вместо этого, потому что теперь она отображается как блок из-за этой строки. Я считаю, что ваш html на всем протяжении. – muratkh
В следующий раз вы столкнетесь с такой проблемой, пожалуйста, добавьте фрагмент кода или ссылку jsfiddle, пожалуйста! –