Question

我正在尝试了解Bootstrap在网格中的推/拉方式是如何工作的。我所拥有的是一个页面，在移动版本上我希望在一些文本上面有一个图像，但在大型显示器上查看时，我希望文本在左边，图像在右边。

询问有关它的一些问题，我被告知要查看Bootstrap网格中的Push / Pull。

然后看一些文章和例子，我想出了下面的plunker。从移动的第一个观点来看，我把图像放在文本的顶部。但是，我必须遗漏一些东西，因为它会像预期的那样工作，但是在大屏幕上它会将图像拉到右边并将文本推向左边，但就像它们在自己的行上一样。左侧的文字未上拉到顶部与图像齐平。另外，当它在大屏幕上时，文字离左边太远了。

<div class="row">
  <div class="col-sm-12 col-md-push-5">
      <img src="..">
  </div>
  <div class="col-sm-12 col-md-pull-7">
      <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
          </p>
      </div>
    </div>

plnkr.co/edit/6Gm7Hvq3h6xINV7540LQ?p=preview

Answer 1

您需要使用col-sm-pull和<div class="row"> <div class="col-sm-7 col-sm-push-5"> <img src=".."> </div> <div class="col-sm-5 col-sm-pull-7"> </div> </div>，并为列设置适当的宽度。

module.exports = function(config) {
    config.set({
        browsers: ['PhantomJS'],
        files: [
            { pattern: 'test-context.js', watched: false }
        ],
        frameworks: ['jasmine'],
        preprocessors: {
            'test-context.js': ['webpack']
        },
        webpack: {
            module: {
                loaders: [
                    { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
                ]
            },
            watch: true
        },
        webpackServer: {
            noInfo: true
        }
    });
};

Codeply

Answer 2

这完全取决于您使用的版本（对于Bootstrap 4及更高版本）有功能order。 IT始终由您决定视口的顺序，或者我说的是设备尺寸可用于推拉，您可以像这样使用它...高兴的编码请参考link

<div class="row">
    <div class="col-sm-2 order-md-2 order-sm-1"  >
       <img src="..">
   </div>
   <div class="col-sm-10 order-md-1 order-sm-2 ">
      <p>
      Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
      </p>
   </div>
</div>

使用Bootstrap的推/拉不能按预期工作？

2 个答案: