如何在 Bootstrap 中让图片准确地停留在屏幕左侧，同时不破坏同一行中的文本及其响应能力？

Question

我希望图像正好位于屏幕的左侧（将其固定在左侧）。我希望图像从屏幕一侧变为 "start"。我设法做到了

position:fixed; left: -15px;

它从图像的角度来看是有效的，它在我测试的每个屏幕上都从屏幕的左侧开始。但它破坏了其他东西，即同一行上的文本将位于图片的顶部，并且如果我减小 windows/screen 大小，文本将变得更加混乱。什么是更好的解决方案？

我的代码：

<div class="row">
              <div class="col-md-3" id="swoosh">
                <img class="img-responsive" src="img/img1.png">
              </div>
              <div class="col-md-6">
                    <h1>Title of the website</h1>
                    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
              </div>
            <div class="col-md-3">
                <img class="img-responsive" src="img/logo.png">
            </div>
        </div>

我要第一张图，所以img1.png在左边，标题在中间，logo.png在右边。第二张图，logo.png不用固定在右边，img1就在左边。

我尽力提供了您需要的所有信息，但我是新来的，所以如果您还需要什么，请告诉我！

提前致谢！

编辑：添加了 fiddles.

如您所见，黑色图像并不是从屏幕左侧开始的： http://www.bootply.com/bGJhH27MQO

下一个 fiddle 向您展示了应该如何放置黑色图像，但它破坏了网站： http://www.bootply.com/sFeKODGOSq

Answer 1

实际上，您的 html 差不多可以用了。正如您所发现的，在 Bootstrap 的网格系统中使用固定位置效果不佳。

与其尝试将 <div> 固定在左边缘，不如尝试将图像固定在左边缘。您不需要使用绝对定位来做到这一点。您可以使用负的 margin-left 值将图像向左移动。请参阅下面的更新代码

#swoosh {
 margin-left: -15px;

}

<div class='container-fluid'>
  <div class="row outerDiv">
    <div class="col-xs-3 col-md-2 imageDiv" >
       <img class="img-responsive" id="swoosh" ...

margin-left 值的实际值有点模糊。 -15px 的值是为了偏移 Bootstrap 的 col-xxxx 类中的 padding-left 值。您将需要调整该值以满足您的需要。

我在 JSBin

创建了一个工作版本

Answer 2

好的，您在容器中有一个行元素 - 因此除非您使用负边距，否则您将无法完全移动该元素。您可以将该行放置在一个容器流体元素中，这将消除对位置的限制，但它会将元素拉伸到屏幕的整个宽度

<div class="container">
 <div class="navbar navbar-default">
  <p>Navbar Code Here</p>
 </div>    
</div><!-- /.container -->
<div class="container-fluid">
 <div class="row">
  <div class="col-md-3" id="swoosh">
   <img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
  </div>
  <div class="col-md-6">
   <h1>Title of the website</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
  <div class="col-md-3">
   <img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
  </div>
 </div>     
</div><!-- /.container-fluid -->

然后您可以通过应用

删除左侧图像上的填充

#swoosh {padding-left: 0;}

给你的 css.

如果您需要更改响应式视图中列的对齐方式，您应该开始查看 http://getbootstrap.com/css/#grid-example-mixed-complete 以更改视口布局减少 - 可能使用 col-xs-6 等来实现您所追求的对齐方式

如何在 Bootstrap 中让图片准确地停留在屏幕左侧，同时不破坏同一行中的文本及其响应能力？

How to make an image stay exactly at the screen left side in Bootstrap, without ruining the text in the same row and its responsiveness?

html

css

twitter-bootstrap

twitter-bootstrap-3