Question

我有以下代码，它基本上是一组引导标注标记。我试图对齐12列的几行。如果我使用行，我会在标注标记内找到一个不需要的滚动条。

这是代码，也可以在this fiddle

中查看

<body style="width:100%;">

    <div class="col-xs-12">
        <div class="bs-callout bs-callout-success" style="overflow:auto;">
            <div class="col-xs-2">
                    <img src="http://via.placeholder.com/100x20" style="max-height: 48px; max-width: 60px;"/>
            </div>
            <div class="col-xs-9">
                            <h4>FOO</h4>
            </div>

            <div class="col-xs-2"></div>
            <div class="col-xs-3">
                    <span><small><em>Col 1</em></small></span><br/>
                    <span>10000</span>
            </div>
            <div class="col-xs-3">
                    <span><small>Col 2</small></span><br/>
                    <span>20000</span>
            </div>
            <div class="col-xs-3">
                    <span><small>Col 3</small></span><br/>
                    <span>30000</span>
            </div>
            <div class="col-xs-1"></div>

            <div class="col-xs-2"></div>
            <div class="col-xs-3">
                    <span><small>Estado/</small></span><br/>
                    <span>Estado</span>
            </div>
            <div class="col-xs-6">
                    <span>FOO &rarr;</span>
                    <span>BAR</span>
            </div>
            <div class="col-xs-1"></div>
        </div>
    </div>


    <div class="col-xs-12">
        <div class="bs-callout bs-callout-success" style="overflow:auto;">
                <div class="col-xs-2">
                        <img src="http://via.placeholder.com/100x60" style="max-height: 48px; max-width: 60px;"/>
                </div>
                <div class="col-xs-9">
                                <h4>FOO</h4>
                </div>

                <div class="col-xs-2"></div>
                <div class="col-xs-3">
                        <span><small><em>Col 1</em></small></span><br/>
                        <span>10000</span>
                </div>
                <div class="col-xs-3">
                        <span><small>Col 2</small></span><br/>
                        <span>20000</span>
                </div>
                <div class="col-xs-3">
                        <span><small>Col 3</small></span><br/>
                        <span>30000</span>
                </div>
                <div class="col-xs-1"></div>

                <div class="col-xs-2"></div>
                <div class="col-xs-3">
                        <span><small>Estado/</small></span><br/>
                        <span>Estado</span>
                </div>
                <div class="col-xs-6">
                        <span>FOO &rarr;</span>
                        <span>BAR</span>
                </div>
                <div class="col-xs-1"></div>
            </div>
    </div>
</body>

如图所示，第一个标注的图像高度不足以使col-xs标签不对齐，但第二个标注的高度足以使其与<div class="col-xs">不对齐。

应该采取什么措施来解决这个问题？

Answer 1

根据我的理解，您只需要向<body style="width:100%;"> <div class="row"> <div class="col-xs-12"> <div class="bs-callout bs-callout-success" style="overflow:auto;"> <div class="col-xs-2"> <div class="demo-img"> <img src="http://via.placeholder.com/100x60" /> </div> </div> <div class="col-xs-9"> <h4>FOO</h4> </div> <div class="col-xs-2"></div> <div class="col-xs-3"> <span><small><em>Col 1</em></small></span><br/> <span>10000</span> </div> <div class="col-xs-3"> <span><small>Col 2</small></span><br/> <span>20000</span> </div> <div class="col-xs-3"> <span><small>Col 3</small></span><br/> <span>30000</span> </div> <div class="col-xs-1"></div> <div class="col-xs-2"></div> <div class="col-xs-3"> <span><small>Estado/</small></span><br/> <span>Estado</span> </div> <div class="col-xs-6"> <span>FOO →</span> <span>BAR</span> </div> <div class="col-xs-1"></div> </div> </div> <div class="col-xs-12"> <div class="bs-callout bs-callout-success" style="overflow:auto;"> <div class="col-xs-2"> <div class="demo-img"> <img src="http://via.placeholder.com/100x60" /> </div> </div> <div class="col-xs-9"> <h4>FOO</h4> </div> <div class="col-xs-2"></div> <div class="col-xs-3"> <span><small><em>Col 1</em></small></span><br/> <span>10000</span> </div> <div class="col-xs-3"> <span><small>Col 2</small></span><br/> <span>20000</span> </div> <div class="col-xs-3"> <span><small>Col 3</small></span><br/> <span>30000</span> </div> <div class="col-xs-1"></div> <div class="col-xs-2"></div> <div class="col-xs-3"> <span><small>Estado/</small></span><br/> <span>Estado</span> </div> <div class="col-xs-6"> <span>FOO →</span> <span>BAR</span> </div> <div class="col-xs-1"></div> </div> </div> </div> </body>标记添加一个div并将css提供给该div：

.demo-img {
  height: 48px;
  width: 60px;
  overflow: hidden;
}
.demo-img img {
  height: 100%;
  width: 100%;
}

将以下css添加到.css文件中：

$(document).ready(function() {
  $("#trackerid").change(function() {
    var var_locoid = $("#trackerid option:selected").val();
    //  alert(var_locoid);
    $("#deliverylocation").autocomplete({

      source: function(request, response) {
        var auto_data = $("#deliverylocation").val();
        // alert(auto_data);

        //alert(var_locoid);
        $.ajax({
          url: "http://localhost/CodeProject/Testctrl/lookup",
          type: "POST",
          datatype: "json",
          //returnType:"json",
          data: {
            'var_locoid': var_locoid,
            'auto_data': auto_data
          },
          success: function(data) {
            var resp = $.map(data, function(obj) {
              return obj.tag;
            });

            response(resp);
          }
        });
      },
      minLength: 1
    });
  });
});

Answer 2

使用48px的最小高度。

img{
min-height:48px;
}

您可以登入jsfiddle

Answer 3

使用bootstrap class =＆＃34; img-responsive＆＃34;在你的代码中。

在jsfiddle

中查看代码

Bootstrap：如何正确对齐多行col-xs

3 个答案: