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

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

1 голос
/ 16 мая 2019

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

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

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

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

<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 ]

2 голосов
/ 16 мая 2019

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>
1 голос
/ 16 мая 2019

Попробуйте это 

<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>
0 голосов
/ 17 мая 2019

Как уже говорилось, 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 - в .panel-body)

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

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

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

...