2016-05-23 2 views
0

У меня есть форма, содержащая несколько строк, но одна из них исчезает.Исчезновение строки бутстрапа

Исходный код выглядит следующим образом:

<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

Я не могу воспроизвести вашу проблему, все работает нормально, но заметили ли вы, что у вас более 12 столбцов на строку? Это может быть проблема clearfix. – Ricky

+0

Также, если ваши col-md и col-lg будут такими же, как и sm, вам не нужно указывать их, так как col-sm будет применяться к устройствам с шириной экрана, большей или равной его размеру точки останова. – Ricky

ответ

0

Оказывается, моя проблема не была загрузочной. Спасибо всем за то, что вы не можете воспроизвести его, заставляя меня копать глубже. Вопрос оказался тем, что было в div. Это был элемент углового выбора с самозакрывающимся тегом. Смена его на обычный закрывающий тег исправила все. Я исключил это, потому что думал, что это не важно и не проверял перед публикацией.

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. Я только что реализовал его, и он работает хорошо по мне. Дайте мне знать, если я неправильно истолковал вашу проблему.

Смежные вопросы