Html 如何将容器流体中的行居中放置为三列_Html_Css_Twitter Bootstrap

Html 如何将容器流体中的行居中放置为三列

html css twitter-bootstrap

Html 如何将容器流体中的行居中放置为三列,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有，基于推特引导。它的中心看起来是但是在html中，它基本上如下所示： <body> <div class="container-fluid">  <div class="row header center-block"> <div class="logo col-md-12 col-lg-12 center-block t

我有，基于推特引导。
它的中心看起来是

但是

在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>


MEFJUS

我需要将

.content

行作为

.header

行居中，但是

.center block

和

.text center

与徽标不一样。同样，我需要第一列和第三列在窄屏幕上每行有3个成像仪，在宽屏幕上每行有4个图像。另外，我想在中间的

.info

列的左右两侧添加一些边距

我该怎么办？很抱歉问了这么多问题，我是新来的

UPD

将布局更改为低于

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个child div的container div定义

md/lg

您正在为左侧和右侧子对象设置不相等的偏移量-这会导致标记在不同的视图端口中表现不同

只是一个想法-你可以不同意-把

中心块放在子分区是一种浪费，把它放在父分区上就行了



请注意，itemlist
具有固定宽度，这会扭曲对齐，请将其删除，一切都会好起来！：）
 请为此提供css/a演示（例如JSFIDLE）。是的，您有任何css和演示吗？将col-lg-offset-1
放在第一列。这将使所有列向右移动1列。您可能还需要对md
执行同样的操作。您可以看到它部署在这里@jbutler483这里是小提琴。您可以给一个屏幕截图吗…请？？）屏幕截图-@Maay:hmmm，顶部的bassfunk
徽标-圆形-也在向右移动…它不在3个分区的标记中，仍然在松开布局…注意到了吗？是的，有两行，一列的行（徽标）完全居中，但三列的行是not@Maay：那么你是说，您在上面给出的图像，bassfunk徽标是否正确居中？我想它已经向右移动了！！！