Question

我在引导程序缩略图中创建三个四列div时遇到问题。问题是如果我使用col-xs-4类，里面的文本就会超出bootstrap的标题。如果我在另一个内部使用三个div，它可以工作，但是我不能将每个div内的文本对齐在中心。有任何想法吗？目前我使用这个脚本：

<div class="col-md-3 col-lg-3 col-xs-6 col-sm-4">
        <a href="profilo?id=<?php echo $dati['id'];?>" class="thumbnail">
          <img src="<?php echo $url1;?>" alt="Immagine profilo" />
          <span class="flag-diamond"></span>
          <div class="caption">
            <div class="esc_username"><span class="username"><?php echo $username;?></span><span class="hidden-xs age"><?php echo $anni;?> anni</span></div>
            <div class="esc_city"><?php echo $dati['citta'];?></div>
            <div style="width:100%">
              <div class="col-xs-4">TRY</div>
              <div class="col-xs-4">TRY</div>
              <div class="col-xs-4">TRY</div>
            </div>
          </div>
        </a>
      </div>

我得到了这个：

但我想做这样的事情：

[编辑] 如果我添加填充：0到三个div，我得到这个：

Answer 1

写课

.no-padding{
padding:0px;
}

然后在您不希望padding的地方申请，如下所示

              <div class="col-xs-4 no-padding">TRY</div>
              <div class="col-xs-4 no-padding">TRY</div>
              <div class="col-xs-4 no-padding">TRY</div>

我希望这可以解决您的问题，如果不尝试将!important添加到padding这将覆盖其他padding，如果它覆盖

.no-padding{
    padding:0px !important;
    }

Answer 2

使用Bootstrap，你可以嵌套div，这基本上意味着你可以只为你的3个div添加一个周围的行。

        <div class="row">
            <div class="col-xs-4">TRY</div>
            <div class="col-xs-4">TRY</div>
            <div class="col-xs-4">TRY</div>
        </div>

这应该起作用的原因是因为row类具有负的左右边距，它将自动调整到容器，在您的情况下，容器是外部div。

Answer 3

请尝试使用此css代码而不是col-xs-4：

<div class="col-sm-4">TRY</div>
<div class="col-sm-4">TRY</div>
<div class="col-sm-4">TRY</div>

Answer 4

最好的方法是设置padding = 0，或者你可以设置容器div的背景颜色

像

<div class="col-md-3 col-lg-3 col-xs-6 col-sm-4">
    <a href="profilo?id=<?php echo $dati['id'];?>" class="thumbnail">
      <img src="<?php echo $url1;?>" alt="Immagine profilo" />
      <span class="flag-diamond"></span>
      <div class="caption">
        <div class="esc_username"><span class="username"><?php echo $username;?></span><span class="hidden-xs age"><?php echo $anni;?> anni</span></div>
        <div class="esc_city"><?php echo $dati['citta'];?></div>
        <div style="width:100%;background-color:#EEE;">
          <div class="col-xs-4">TRY</div>
          <div class="col-xs-4">TRY</div>
          <div class="col-xs-4">TRY</div>
        </div>
      </div>
    </a>
  </div>

在bootstrap缩略图中创建一个四列div

4 个答案: