Question

我正在尝试创建一个成分列表，我在ul内使用li和div个元素li每种不同信息类型（金额，描述或价格）的元素。在第三个li元素中，描述太长而无法适应其自身div的正常空间。这导致它向下溢出（而不是向右）。这很好，但是探测是由于这种溢出，下一个li元素在错误的位置开始。我已经标记了在错误的位置呈现的文本。

＆＃13;

ul {
  list-style: none;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
  <ul>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        thawed puff pastry sheet
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        2 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        ~
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        All-purpose flour, for rolling
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        5 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        round brie cheese (8 to 12 ounces, 5- to 7-inch diameter)
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        10 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        1
        <!--- WRONG PLACE. Should start on new row -->
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        Large egg, beaten
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        1 USD
      </div>
    </li>
    <li>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        ~
      </div>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        Baguette slices or crackes, to serve
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        1 USD
      </div>
    </li>
  </ul>
</div>

＆＃13;

即使上面的元素溢出，我还能做些什么才能使每个li元素在新行上开始？

Answer 1

将row课程添加到您的

项目中。

<li class="row">...</li>

Answer 2

这是因为float:left类中的col-*。要解决此问题，请使用.row

中的<li>类

也无需使用相同的sm，md，lg值。如果您想为所有屏幕使用相同的网格结构，请在此使用xs ... < / p>

...如果您想要sm断点之前的相同网格结构，请仅使用sm

Stack Snippet

＆＃13;

ul {
  list-style: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="container-fluid">
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      thawed puff pastry sheet
    </div>
    <div class="col-xs-3">
      2 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      ~
    </div>
    <div class="col-xs-7">
      All-purpose flour, for rolling
    </div>
    <div class="col-xs-3">
      5 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      round brie cheese (8 to 12 ounces, 5- to 7-inch diameter)
    </div>
    <div class="col-xs-3">
      10 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      1
    </div>
    <div class="col-xs-7">
      Large egg, beaten
    </div>
    <div class="col-xs-3">
      1 USD
    </div>
  </li>
  <li class="row">
    <div class="col-xs-2">
      ~
    </div>
    <div class="col-xs-7">
      Baguette slices or crackes, to serve
    </div>
    <div class="col-xs-3">
      1 USD
    </div>
  </li>
</ul>

＆＃13;

当其中一个文本中的文字溢出时，<li>元素会丢失所需的对齐

2 个答案: