Question

我有一个页面，其中在第一行我想要一个空格到左侧，在第二行我想要一个空格到右侧。

此空间应为 col-md-2

此空间应与行相同，并且在col-md- * 到 col-xs- *之后，此空间不可见

所以我使用了以下引导代码但没有工作：它在两行的左侧显示空格：（

<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

你应该数到10而不是12。

你想要双方都有抵消。

像这样：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div class="col-xs-12 col-md-8 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">
      X
    </div>
  </div>

  <div class="col-xs-12 col-md-offset-2 col-md-8">
    <div class="col-xs-4 col-md-1">
      X</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 2

Bootstrap偏移量会使列的左边距增加*列

尝试改变这个：

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

为什么bootstrap偏移对两边都不起作用？

2 个答案: