Html 在引导缩略图中创建一个四列div

在引导缩略图中创建三个四列div时出现问题。问题是，如果我使用col-xs-4类，那么里面的文本将超出引导的标题。如果我在另一个div中使用三个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>

我明白了：

但我想这样做：

[编辑] 如果我在三个div中添加padding:0，则得到以下结果： 写入类

.no-padding{
padding:0px;
}

然后在不需要填充的地方应用，如下所示

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

写作课

.no-padding{
padding:0px;
}

然后在不需要填充的地方应用，如下所示

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

---

请尝试此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>

试试看
尝试
尝试

请尝试此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>

试试看
尝试
尝试

设置padding=0或为container div设置背景色的最佳方法

像

---

设置padding=0或为container div设置背景色的最佳方法

像

---

使用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。

通过引导，您可以嵌套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>

尝试
尝试
尝试

---

之所以这样做是因为

行

类具有负的左右边距，这将自动调整自身以适应容器，在您的情况下，容器是外部div。

是的，它解决了问题，但现在div脱离了红色框。.中间内部和中间外部添加到框大小：边框框；我总是写3节课。无填充、.no padding left、.no padding right是的，它解决了问题，但现在div脱离了红色框..中间内部和中间外部添加到框大小：边框框；我总是写3节课。没有填充、.no padding left、.no padding right它可以工作，但是div现在在红色框中居中，中间在外。你可以在jsfiddleit中提供链接吗？它可以工作，但是div现在在红色框中居中，中间在外。你可以在中提供链接吗jsfiddle@GiuseppeDePaola很乐意帮忙@GiuseppeDePaola很乐意帮忙！