Не отображаемый элемент создает маржу

Я не могу избавиться от левого поля ячейки строки начальной загрузки. Мне кажется, что элемент показывает его левое поле, если есть еще один элемент слева, даже если этот элемент не отображается. Прочтите комментарий в коде.Не отображаемый элемент создает маржу

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css"> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" type="text/css"> 
</head> 
<body> 

<div class="container-fluid"> 
    <div class="row-fluid"> 

     <div class="span12 visible-tablet">Tablet</div> 
     <!-- These two elements never show together. One of them always 
      has "display: none." Because of the not displayed element above, 
      the left margin of the bottom element appears that screws up the 
      layout. If I delete the element above, everything is fine. --> 
     <div class="span12 visible-desktop">Desktop</div> 

    </div> 
</div> 

<script src="js/jquery.js"></script> 
<script src="bootstrap/js/bootstrap.js"></script> 
</body> 
</html>

источник

2013-09-15 Graduate

Возможно, мы могли бы рассказать вам больше, если вы показали нам CSS? –

Он использует 'bootstrap.css', как в Twitter Boostrap. –

Первый способ добиться того, что вы хотите, чтобы отделить две раскладки (рабочий стол, планшет) с двумя <div class="row-fluid"> как следующий код:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span12 visible-tablet">Tablet</div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span12 visible-desktop" >Desktop</div> 
    </div> 
</div>

Другой способ будет явно установить маржа к нулю во второй DIV так:

<div class="span12 visible-desktop" style="margin: 0;" >Desktop</div>

источник

2013-09-15 15:19:38

Но убедитесь, что вы не используете встроенный стиль :) –

Вы правы :) –

Проблема не имеет ничего общего с отзывчивым части.

boostrap.css линия 419 говорит:

.row-fluid [class*="span"]:first-child { 
    margin-left: 0; 
}

:first-child не игнорировать скрытые/невидимые элементы, так что нет никакого способа, вы можете сделать, Держа эту разметку.

Я хотел бы использовать

#some-parent .span12.visible-desktop { 
    margin-left: 0; 
}

с возможно уникальным родительским контейнером (#some-parent), как я сделал here.

источник

2013-09-15 15:23:12

Не отображаемый элемент создает маржу

ответ

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