如何删除引导面板中不需要的中断

Question

我有一个面板，我在其中显示有关用户的一些基本信息。我想在这个面板的中心显示图表。

我想删除一个不需要的空间，但我不知道该怎么做。

请看图：

此面板的代码：

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

Answer 1

如前所述，p 是块级元素并创建换行符 - 但 Bootstrap 还使用 10px 底部边距设置它们，因此您可能希望用

覆盖它

p { margin-bottom: 0;}

我不建议这样做 - 边距底部的想法是分隔文本元素。

导致您的空间问题的原因是您在面板主体中使用带有 .panel 主体类的 div。

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

Bootstrap 使用 15px 填充设置面板主体的样式 - 所以要么 a) 用不同的类替换该类（这就是我要做的 - 在 .panel-body 内有一个 .panel-body 是没有意义的）

b) 从嵌套面板主体中删除填充

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

但正如我所说 - 另一个面板中的面板主体在语义上是错误的。

Answer 2

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>

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