Как убрать нежелательный разрыв в панели начальной загрузки

У меня есть панель, где я показываю некоторую основную информацию о пользователе. Я хочу отобразить график в центре этой панели.

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

Пожалуйста, посмотрите на изображение: проблема

Код для этой панели:

<div class="row"> <div class="panel panel-default"> <div class="panel-heading">Detail zákazníka <a href="<?php echo site_url('zakaznici/'); ?>" class="glyphicon glyphicon-arrow-left pull-right"></a></div> <div class="panel-body"> <div class="form-group"> <label>ID zákazníka:</label> <p><?php echo !empty($zakaznici['ID_zakaznici'])?$zakaznici['ID_zakaznici']:''; ?></p> </div> <div class="form-group"> <label>Meno:</label> <p><?php echo !empty($zakaznici['meno'])?$zakaznici['meno']:''; ?></p> </div> <div class="panel-body" align="center">Graph will be displayed here</div> <div class="form-group"> <label>Priezvisko:</label> <p><?php echo !empty($zakaznici['priezvisko'])?$zakaznici['priezvisko']:''; ?></p> </div> <div class="form-group"> <label>Email:</label> <p><?php echo !empty($zakaznici['email'])?$zakaznici['email']:''; ?></p> </div> <div class="form-group"> <label>Adresa:</label> <p><?php echo !empty($zakaznici['adresa'])?$zakaznici['adresa']:''; ?></p> </div> <a class="btn btn-primary" href="<?php echo site_url('Zakaznici/viewusersvypozicky/'.$zakaznici['ID_zakaznici']); ?>" role="button">Zobraziť prenájmy</a> </div> </div> </div> 

Всего 3 ответа


Попробуй это

<div class = "row">
    <div class = "panel panel-default col-4">
        <div class = "panel-body">

        //your matter

        </div>
    </div>

    <div class = "panel panel-default col-4">
        <div class = "panel-body">

            //your graph

        </div>
    </div>

</div>

Теги p создают разрывы строк. Вы можете заменить тег p тег span чтобы удалить нежелательный разрыв.

Ваш div с именем класса 'panel-body' также занимает место. Вы можете добавить position: absolute; к его определенным стилям, и это не будет создавать этот разрыв.

 <div class="row"> <div class="panel panel-default"> <div class="panel-heading">Detail zákazníka <a href="<?php echo site_url('zakaznici/'); ?>" class="glyphicon glyphicon-arrow-left pull-right"></a></div> <div class="panel-body"> <div class="form-group"> <label>ID zákazníka:</label> <p><?php echo !empty($zakaznici['ID_zakaznici'])?$zakaznici['ID_zakaznici']:''; ?></p> </div> <div class="form-group"> <label>Meno:</label> <span><?php echo !empty($zakaznici['meno'])?$zakaznici['meno']:''; ?></span> </div> <div class="panel-body" align="center">Graph will be displayed here</div> <div class="form-group"> <label>Priezvisko:</label> <p><?php echo !empty($zakaznici['priezvisko'])?$zakaznici['priezvisko']:''; ?></p> </div> <div class="form-group"> <label>Email:</label> <p><?php echo !empty($zakaznici['email'])?$zakaznici['email']:''; ?></p> </div> <div class="form-group"> <label>Adresa:</label> <p><?php echo !empty($zakaznici['adresa'])?$zakaznici['adresa']:''; ?></p> </div> <a class="btn btn-primary" href="<?php echo site_url('Zakaznici/viewusersvypozicky/'.$zakaznici['ID_zakaznici']); ?>" role="button">Zobraziť prenájmy</a> </div> </div> </div> 


Как уже говорилось, p являются элементами уровня блока и создают разрывы строк, но Bootstrap также объединяет их с полем 10px, поэтому вы можете перезаписать его

p { margin-bottom: 0;}

Я не рекомендую этого - идея нижнего края состоит в том, чтобы отделить текстовые элементы.

Причиной возникновения проблемы с пространством будет то, что вы используете div с классом тела .panel внутри тела панели.

<div class="panel-body" align="center">Graph will be displayed here</div>

Bootstrap стилизует тело панели с отступом 15px - так что либо а) замените этот класс другим классом (это то, что я бы сделал - нет смысла иметь .panel-body -with .panel-body)

б) удалить прокладку с вложенного корпуса панели

.panel-body > .panel-body { padding: 0}

Но, как я уже сказал, тело панели внутри другого семантически неверно.


Есть идеи?

10000