Question

我不确定如何将图像放在正确的位置。我正在使用一个自举的自定义博客模板，我试图稍微修改它，使它看起来像我想要的方式。

我想将图像放在左侧蓝色矩形的位置，如下图所示。在这里，我尝试了几种不同的东西，但是我的图像一直在博客标题＃34; The Bootstrap Blog＆＃34;下面呈现，这不是我想要的。我尝试过使用

 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

Answer 1

class="col-sm-offset-1"将图像向右移动而不是向左移动。如果你增加像class="col-sm-offset-2"那样的no，它将向右移动1列。所以，这不是解决方案。

您有两个选项

<强> NO.1

将其包裹在class="container-fluid"内，不要让class="col-sm-offset-1"看到下面的代码段。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          </head>
          <body>
            <div class="container-fluid">
              <div class="row">
    <div class="col-md-4"> 

      <img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">

      </div>
  </div>
              </div>
            </body>
  </html>

<强>第2期

将其包裹在class="container"内，并根据您的意愿添加一些margin-left。请参阅下面的示例 -

.image {
  margin-left:-60px;
  }

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          </head>
          <body>
            <div class="container">
              <div class="row">
    <div class="col-md-4 image"> 

      <img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">

      </div>
  </div>
              </div>
            </body>
  </html>

如何将图像放在bootstrap中的特定位置？

1 个答案: