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标签可创建换行符。您可以将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 2

尝试一下

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

Answer 3

如前所述，p是块级元素并创建换行符-但是Bootstrap还将其底部留有10px的边距，因此您可能想用

覆盖它们

p { margin-bottom: 0;}

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

在您指示的地方，将导致空间问题的原因是您在面板主体中使用了具有.panel主体类的div。

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

引导程序使用15像素填充填充面板主体样式-因此， a）用另一个类替换该类（这是我要做的-在.panel-body中具有.panel-body没有意义）

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

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

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

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

3 个答案: