Question

我有一个包含多行的表单，但其中一行正在消失。

源代码如下所示：

<div class="container-fluid">
<div class="row"><!--works fine-->
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
        ...
    </div>
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
        ...
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        ...
    </div>
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        ...
    </div>
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
        ...
    </div>
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
        ...
    </div>
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
        <h1>thing1</h1>
    </div>
</div>
<div class="row"><!--this row dissapears-->
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
            <h1>thing2</h1>
    </div>
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        ...
    </div>
</div>
<div class="row"><!--works fine-->
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
        ...
    </div>
</div>

据我所知，这段代码看起来不错，但这就是它显示时的结果。

<div class="container-fluid">
<div class="row"><!--works fine-->
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
        ...
    </div>
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
        ...
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        ...
    </div>
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        ...
    </div>
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
        ...
    </div>
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
        ...
    </div>
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
        <h1>thing1</h1>
        <h1>thing2</h1>
    </div>
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        ...
    </div>
</div>
<div class="row"><!--works fine-->
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
        ...
    </div>
</div>

这使得thing1和thing2一起出现而不是在他们自己的行上，我不知道为什么。

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row"><!--works fine-->
      <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
        ...
      </div>
      <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
        ...
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        ...
      </div>
      <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        ...
      </div>
      <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
        ...
      </div>
      <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
        ...
      </div>
      <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
        <h1>thing1</h1>
      </div>
    </div>
    <div class="row"><!--this row dissapears-->
      <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
        <h1>Row that disappears.</h1>
      </div>
      <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
        
      </div>
    </div>
    <div class="row"><!--works fine-->
      <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
        Last Row
      </div>
    </div>

代码似乎没有任何问题@Trevor。我刚刚实现了它并且根据我的说法运行良好。如果我误解了你的问题，请告诉我。

Answer 2

此代码工作正常。请检查您的css文件或bootstrap库。请使用bootstrap cdn link。

Answer 3

原来我的问题根本不是引导程序。谢谢大家提到你无法重现它，让我深入挖掘。事实证明是div中的问题。它是一个带有自闭标签的角度选择元素。将其更改为正常结束标记可修复所有问题。我排除了它，因为我认为它不重要，并且在发布之前没有验证。

Bootstrap行消失

3 个答案: