css - 为什么 Bootstrap 偏移对双方都不起作用？

Question

我有一个页面，在第一行我想在左侧留一个空格，在第二行我想在右侧留一个空格。

这个空间应该是col-md-2

这个空间应该与 row 相同并且这个空间在 col-md-* to col-xs-* 之后不可见

所以我正在使用以下 Bootstrap 代码但没有工作:它在两行的左侧显示空间 :(

<div class="row">

    <div class="col-xs-12 col-md-10 col-md-offset-2">
        <div class="col-xs-8 col-md-11 text-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
        </div>
        <div class="col-xs-4 col-md-1">
            <img src="<?php echo SITE_URL.'images/users_avator/ppic_5795beb6936d63.04385327.jpg' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
        </div>
    </div>

     <div class="col-xs-12 col-md-offset-2 col-md-10">
        <div class="col-xs-4 col-md-1">
            <img src="<?php echo SITE_URL.'images/users_avator/ppic_5795beb6936d63.04385327.jpg' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
        </div>
        <div class="col-xs-8 col-md-11 text-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
        </div>            
    </div>  

</div> 

更新:

现在我正在使用这段代码，它在 col-sm-* 网格上显示空间，如下图所示。图像和文本之间第二行的空间。

   <div class="row">

        <div class="col-xs-12 col-md-10 col-md-offset-2">
            <div class="col-xs-8 col-md-11 text-message">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
            </div>
            <div class="col-xs-4 col-md-1">
                <img src="<?php echo SITE_URL.'images/users_avator/ppic_5795beb6936d63.04385327.jpg' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
            </div>
        </div>

         <div class="col-xs-12 col-md-10">
            <div class="col-xs-4 col-md-1">
                <img src="<?php echo SITE_URL.'images/users_avator/ppic_5795beb6936d63.04385327.jpg' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
            </div>
            <div class="col-xs-8 col-md-11 text-message">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
            </div>            
        </div>  

    </div>

Answer 1

Bootstrap offset 会将列的左边距增加 * 列

试着改变这个:

<div class="col-xs-12 col-md-10">

代替这个:

 <div class="col-xs-12 col-md-offset-2 col-md-10">

左边的空间将是您在右侧所需的空间

info

更新代码:

 <div class="row">
    <div class="col-xs-12 col-md-10 col-md-offset-2 col-sm-offset-2  col-sm-10">
        <div class="col-xs-8 col-md-11 text-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
        </div>
        <div class="col-xs-4 col-md-1">
            <img src="<?php echo 'http://www.w3schools.com/images/colorpicker.gif' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
        </div>
    </div>

     <div class="col-xs-12 col-md-offset-2 col-md-10 col-sm-10">
        <div class="col-xs-4 col-md-1">
            <img src="<?php echo 'http://www.w3schools.com/images/colorpicker.gif' ?>" alt="User Avatar" class="img-responsive img-circle" width="50"/>
        </div>
        <div class="col-xs-8 col-md-11 text-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.</p>
        </div>            
    </div>  
</div>