Question

我正在尝试将列的内容对齐到左侧。我正在使用bootstrap列和float div来比较。这是我的bootstrap标记：

<div class="row no-gutter" style="margin:0;padding:5px 0">
    <div>
        <div class="col-xs-1">
             <span">
                 Case #
             </span>
        </div>
        <div class="col-md-1">
             <input  easyui-textbox readonly ng-model="caseid" data-options="font_size:'12'"
                     style="height:30px;width:50px">
        </div>
        <div class="col-xs-1">
             <span">
                 Title
             </span>
        </div>
        <div class="col-md-7">
             <input easyui-textbox data-options="validType:'maxLength[128]',required:true,font_size:'11'"
                    ng-model="title" style="height:30px;">
        </div>
    </div>
</div>

和浮动div：

CSS：

.col-float{
    float:left;
}
.col-float1{
    width: 5%;
}
.col-float3{
    width: 10%;
}

HTML：

<div class="row" style="margin:0;padding:5px 0">                                        
                <div>
                    <div class="col-float col-float1">
                        <span>
                            State
                        </span>
                    </div>
                    <div class="col-float col-float3">
                        <input easyui-combobox ng-model="caseStateList" selectedvalue="casestate"
                               style="width:75px;">
                    </div>
                    <div class="col-float col-float1">
                        Priority
                    </div>
                    <div class="col-float col-float3">
                        <input easyui-combobox ng-model="casePriorityList" selectedvalue="priorityid"
                               style="width:75px;">
                    </div>
                    <div class="col-float col-float1">
                        Assign
                    </div>
                    <div class="col-float col-float3">
                        <input easyui-combobox ng-model="userPrefList" selectedvalue="assignuser" panelHeight="200px" panelWidth="200px"
                               filter="hideDeletedUsers" style="width:130px;">
                    </div>
                </div>
            </div>

结果如下：

是否可以将上行内容向左移动，就像在第二行中一样？

由于

Answer 1

不幸的是，Bootstrap的网格系统（行和列）并没有真正起作用。网格系统更像是一个表而不是浮动div。

为了达到类似效果，您可以考虑使用bootstrap＆＃39; forms-inline。

<form class="form-inline">
  <div class="form-group">
    <label>Case # <input type="text"></label>
  </div>
  <div class="form-group">
    <label>Title
      <input easyui-textbox data-options="validType:'maxLength[128]',required:true,font_size:'11'"
             ng-model="title" style="height:30px;">
    </label>
  </div>
</form>

JSBin示例：http://output.jsbin.com/zuyumimaqu

请注意：

这仅适用于视口中至少为768像素宽的表单。

这意味着如果观看者的屏幕宽度小于768px，它们将成为垂直形式。

否则，您可能不得不诉诸浮动div实现。

Bootstrap列 - 将内容对齐到左侧

1 个答案: