Question

我想知道在左侧添加空间的最佳方法是什么一个bootsrap行，使用col-sm- *。我能够使用空div来实现它，如下所示。

           <div class="row">
                <div class="col-sm-1" >
                   <!-- I want to remove this div -->
                </div>
                <div class="col-sm-2" >
                    Text1
                </div>
                <div class="col-sm-3">
                    Text2
                </div>
                <div class="col-sm-3">
                    Text3 
                </div>
                <div class="col-sm-3">
                    Text4
                </div>
           </div>

但这不是一个好方法。如何在不使用空div的情况下完成它？

Answer 1

使用此代码：

.col-sm-2 col-sm-offset-1

在第二个div中如下：

<div class="row">                
            <div class="col-sm-2 col-sm-offset-1" >
                Text1
            </div>
            <div class="col-sm-3">
                Text2
            </div>
            <div class="col-sm-3">
                Text3 
            </div>
            <div class="col-sm-3">
                Text4
            </div>
       </div>

Answer 2

您可以使用Bootstrap's Offsetting Column类通过在第一列上应用类col-sm-offset-1来实现此目的，如下所示：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-2 col-sm-offset-1" >
    Text1
  </div>
  <div class="col-sm-3">
    Text2
  </div>
  <div class="col-sm-3">
    Text3 
  </div>
  <div class="col-sm-3">
    Text4
  </div>
</div>

＆＃13;

如何在bootsrap行的左侧添加空格？

2 个答案: