DEMO

Question

我有一个用Bootstrap编写的网站，其中我有两个.row在一个容器中，每行有3个项目，即下面有一些文字的图像和诸如此类的东西。它在桌面上看起来不错，但我不确定如何让浏览器在移动设备上重新排序，以便行上的每个项目一个接一个地列在彼此的顶部，项目居中并且两边都有一些间距的项目。

http://jsfiddle.net/DTcHh/2481/

<div class="container-fluid" id="nr2">

<div class="row">
<div class="col-lg-12">
<h1 id="tilbud">Header</h1>
<h3 id="tilbudsbes"> Description</h3>

</div>




<div class="row" style="margin-top:10%">

<div class="col-md-2"></div>
<div class="col-md-2">
<div>
<img src="Img/IMG.png" class="illustrasjon img-responsive">
<h4 class="tittel">Item</h4>
<div class="linje"></div>
<p class="prodBes">LOREM IPSUM HOIEFEOWIF BLA BLA BLA BLAH </p>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<div>
<img src="Img/IMG.png" class="img-responsive">
<h4 class="tittel">Item</h4>
<div class="linje"></div>
<p class="prodBes">DESCRIPTION OIEHOIWEJF
  OIWJEFOIWEJFOIWEJFOI
  WJEOF EWKJFWEKFJN EFIWJEF WKEJF
  WEKJF WKJEF WKEJF WEF</p>
</div>
</div>

<div class="col-md-1"></div>
<div class="col-md-2">
<div>

<img src="Img/IMG.png" class="img-responsive">
<h4 class="tittel">Item</h4>
<div class="linje"></div>
<p class="prodBes">EIOFJWEOIFJOIWE ITEM ITEM WEIFOJWEOFJOIWEFOIEJWF</p>
</div>
<div class="col-md-2"></div>
</div>
</div>


<div class="row" style="">

<div class="col-sm-2"></div>
<div class="col-sm-2">
<div>
<img src="Img/IMG.png" class="illustrasjon img-responsive">
<h4 class="tittel">Item</h4>
<div class="linje"></div>
<p class="prodBes">LOREM IPSUM DOLOR SIT AMET </p>
</div>

</div>
<div class="col-sm-1"></div>

<div class="col-sm-2">
<div>
<img src="Img/IMG.png" class="img-responsive">
<h4 class="tittel">Item</h4>
<div class="linje"></div>
<p class="prodBes">LOREM LOREM IPSUM UPS</p>
</div>
</div>
<div class="col-sm-1"></div>

<div class="col-sm-2">
<div>

<img src="Img/IMG.png" class="img-responsive">
<h4 class="tittel">Item</h4>
<div class="linje"></div>
<p class="prodBes">BLAH BØAH OIEHWFOIWHEFOIHWE
  IOFHOWIEFOIWEFOIWEF</p>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</div>
</div>

我在行的两边都有空列的原因是项目和页面之间会有间距。我知道我可以使用填充或边距进行间距，但是这些项目不会在页面上居中。

非常感谢任何帮助。：）

Answer 1

在目前为止使用的所有div中尝试这样：

text-center用于居中文字， center block用于居中图像

<div class="col-md-2 col-xs-12 col-sm-12 text-center ">
  <div>
    <img src="Img/IMG.png" class="illustrasjon img-responsive center-block">
    <h4 class="tittel">Item</h4>
    <div class="linje"></div>
    <p class="prodBes">LOREM IPSUM HOIEFEOWIF BLA BLA BLA BLAH </p>
  </div>
</div>

DEMO

Answer 2

你好看看bootstrap docs他们真的很好。它解释了如何使用这些类。

你有lg md sm xs，你可以一次申请超过1个这样的课程。它们针对不同的屏幕尺寸。 Md是常用的，因为它在大多数设备上表现良好。但是如果你想要高级控制，你需要申请多个班级。

使用Bootstrap重新排序移动设备上的项目

2 个答案:

DEMO