Question

我有this layout，基于twitter bootstrap 它看起来居于narrow screens

enter image description here

但是totally not centered on more wider screens

enter image description here

在HTML中它基本上看起来像这样：

<body>
<div class="container-fluid">

<!-- This row is perfectly centered -->
      <div class="row header center-block">
        <div class="logo col-md-12 col-lg-12 center-block text-center">
          <img src="logo.jpg">
        </div>
      </div>


<!-- This row needs to be centered -->
      <div class="row content center-block text-center">

<!-- first column with five images. It should be 3 images in a row in narrow screens and 4 in wider screens -->
        <div class="col-md-5 col-lg-5 scene itemlist center-block text-center">
          <div class="row scene-header">
            <img src="scene.jpg">
          </div> 

          <div class="row scene-elements">

                <div class="scene-element">
                    <img class="clickimg" src="http://i.imgur.com/ouImJ3j.jpg">
                </div>

                <div class="scene-element">
                    <img class="clickimg" src="http://i.imgur.com/6H9PBdO.jpg">
                </div>

                <div class="scene-element">
                    <img class="clickimg" src="http://i.imgur.com/S731TrW.jpg">
                </div>

                <div class="scene-element">
                    <img class="clickimg" src="http://i.imgur.com/tEj2TzR.jpg">
                </div>

                <div class="scene-element">
                    <img class="clickimg" src="http://i.imgur.com/j0fUzW3.jpg">
                </div>
          </div>

        </div>

<!-- Middle row with text. This row needs to have bigger left and right margins on wider screen -->

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info center-block text-center">


    <div class="infoblock">
        <div class="row info-header">
            MEFJUS
         </div> 
         <div class="row info-elements">


            <p class="link"><a target="_blank" href="https://soundcloud.com/mefjus">SOUNDCLOUD</a></p>  



            <p class="link"><a target="_blank" href="https://www.facebook.com/mefjus">FACEBOOK</a></p>  



            <p class="link"><a target="_blank" href="http://vk.com/the_upbeats">VK</a></p>  



         </div> 
     </div>

        </div>

<!-- seconf column with five images. It should be 3 images in a row in narrow screens and 4 in wider screens -->
        <div class="col-md-5 col-lg-5 our itemlist center-block text-center">
          <div class="row our-header">
            <img src="our.jpg">
          </div> 

          <div class="row our-elements">

                <div class="our-element">
                    <img class="clickimg" src="http://i.imgur.com/IxrgHax.jpg">
                </div>

                <div class="our-element">
                    <img class="clickimg" src="http://i.imgur.com/X3roxXK.jpg">
                </div>

                <div class="our-element">
                    <img class="clickimg" src="http://i.imgur.com/LH8N8uH.jpg">
                </div>

                <div class="our-element">
                    <img class="clickimg" src="http://i.imgur.com/zb3dARv.jpg">
                </div>

                <div class="our-element">
                    <img class="clickimg" src="http://i.imgur.com/rDDkie8.jpg">
                </div>

          </div>

        </div>

      </div>

      <footer class="footer text-center"></footer>

    </div> <!-- /container --></body>

我需要将.content行置于.header行的中心位置，但.center-block和.text-center不会像使用徽标一样在这里工作。同样我需要第一列和第三列在窄屏幕上每行3个成像器，在更宽的屏幕上每行4个图像。同样，我想在左侧和右侧为中间.info列添加一些边距。

我该怎么办？我很抱歉这么多问题，我是新人。

UPD JSFIDDLE of a layout ORIGINAL

Answer 1

将布局更改为div宽度

以下

<div class="col-md-12 col-lg-12 row content center-block text-center">
          <!-- ^^^^---added md and lg classes here -->
    <div class="col-md-5 col-lg-5 scene itemlist center-block text-center"></div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info center-block text-center"></div>
    <div class="col-md-5 col-lg-5 our itemlist center-block text-center"></div>

</div>

问题：

您还没有为容纳3个孩子div的容器div定义md / lg
您为左右孩子设置了不相等的offset值 - 这导致标记在不同的视口中表现不同
只是一个想法 - 你可以不同意 - 将center-block放在子div中是一种浪费，只需将它放在父母身上！

请注意itemlist有固定的宽度会扭曲对齐方式，将其删除，一切都会好！：）

如何将容器流体中的三列行中心排列

1 个答案: