2016-05-23 6 views
0

私はいくつかの行を含むフォームを持っていますが、そのうちの1つが消えています。ブートストラップ行消滅

ソースコードは次のようになります。

私の知る限り、このコードは正常に見えるが、これは、それが表示されますときに変わるものです言うことができるように
<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が自分の行に一緒にしていないように見える、と私は理由は分からないことができます。

+0

エラーを再現できないようです。私のためにうまく動作します。 – Jhecht

+0

問題は再現できません。すべて正常に機能しているようですが、1行に12列以上あることに気付きましたか?それは明らかな問題かもしれません。 – Ricky

+0

また、col-mdとcol-lgがsmと同じになる場合、col-smはブレークポイントのサイズ以上の画面幅を持つデバイスに適用されるため、指定する必要はありません。 – Ricky

答えて

0

私の問題は、ブートストラップではないことが判明しました。あなたにそれを再現できないと言及してくれてありがとう、深く掘り下げました。問題は部門内のものであることが判明しました。自己閉鎖タグ付きの角度選択要素でした。通常の終了タグに変更するとすべてが修正されました。私はそれが重要ではないと思って投稿した前に確認しなかったので除外しました。

0

このコードは正常に動作します。あなたのCSSファイルまたはブートストラップライブラリを確認してください。 ブートストラップcdn linkを使用してください。

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を持っていないようです。私はそれを実装しただけで、それは私にとってうまくいきます。あなたの問題を誤解しているかどうかを教えてください。

関連する問題