Question

我觉得有一个快速的解决方案，但我很难过。

我有一个简单的布局，2个col图像，4个col文本，2个col图像，4个col文本。

https://codepen.io/brianpensinger/pen/GEbxxv

<div class="container">
<div class="row">
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div>
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div>
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>

在SM断点上，我想切换到每个6列。但是，我的第二张图片位于文本下方，而不是转到新行。

Screenshot

如何强制它到下一行？

谢谢，布赖恩

Answer 1

这是由于cleafix float:left引起的cols问题。您可以通过为该特定CSS视口编写SM来手动执行此操作，或者只为HTML添加clearfix，该SM仅适用于img { width: 100%; height: auto; }视口。

检查摘录。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div>
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis
      quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

    <!-- ############## Added Clearfix for SM view ############# -->
    <div class="clearfix visible-sm"></div>


    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div>
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis
      quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>

export class VideoDataMap {
    [videoId: string]: {
        url: string,
        name: string
    };
}

Answer 2

你好！

    <div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-sm-6 col-md-4"><img src="https://dummyimage.com/300x300/000/fff"></div>
            <div class="col-sm-6 col-md-8">Text here</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-sm-6 col-md-4"><img src="https://dummyimage.com/300x300/000/fff"></div>
            <div class="col-sm-6 col-md-8">Text here</div>
        </div>
    </div>
    </div>

这将满足您的要求:)通过定义您告诉它的第一行是一个块。通过定义内部的cols，你已经告诉占用md / lg页面的50％。之后，它们将自动进入全宽度，这是您最终遇到问题的地方。

要打击你可以定义另一行。通过定义另一行，你告诉bootstrap占据容器宽度的100％...因为上面的col不再有效超过md大小，所以它完全统治了100％。这将给你6/6，一个低于另一个。

Bootstrap - 在文本区

2 个答案: