Question

我正在尝试使用Bootstrap创建一个页面。这个想法是在左侧显示明星（链接）创建3列，在中心创建加泰罗尼亚语中的“Infilmtrats”，以及其他明星（其他链接）

但它会破坏电脑，手机和平板电脑。我想在3台设备中看起来很好......

第二列中的移动设备不居中，第三列跳转到下一行（在“infilmtrats”之后）。

你知道吗？我正试图“浮动”，但没办法，我花了我的代码。

非常感谢。

CURRENT。 http://www.infilmtrats.com/interrogatorios/

是的，应该是http://oi60.tinypic.com/28b8mu0.jpg

<div class="row"> 
<div class="pull-left"><br/><br/><br/> 
    <p><img src="start.gif" alt="estrella" width="52" height="47" class="size-full wp-image-302" /></p> 
</div> 
<div class="centered" style="text-align: center;"> 
    <h1 style="color: #ffffff;">I<br /> N<br /> T<br /> E<br /> R<br /> R<br /> O<br /> G<br /> A<br /> T<br /> O<br /> R<br /> I<br /> O<br /> S<br /> </h1> </div> 
<div class="pull-right"> 
    <p><img src="start.gif" alt="estrella" width="52" height="47" class="aligncenter size-full wp-image-302" /></p> 
</div>

Answer 1

您需要添加列div。像这样：

<div class="row">

<div class="col-sm-4">
  <div class="pull-left"> ... <div>
<div>

<div class="col-sm-4">
  <div class="centered"> ... <div>
<div>

<div class="col-sm-4">
  <div class="pull-right"> ... <div>
<div>

</div>

Answer 2

您需要使用grid system的列类。默认情况下，网格系统中有12列。如果您想要3列，则除以12/3 = 4以获得每列的宽度。

<div class="row">
    <div class="col-xs-4">
        Left
    </div>
    <div class="col-xs-4">
        Center
    </div>
    <div class="col-xs-4">
        Right
    </div>
</div>

与列相关联的各种尺寸（xs，sm，md，lg）确定列将在何时变为全宽并开始堆叠

尊重bootstrap3

2 个答案: