Question

我正在创建一个简单的图库。在图像上方，我指出拍摄照片的地方，但是第二行和另一行都有问题 - 名称的div被推到右边而不是保持居中。以下是它的外观：http://prntscr.com/fg10u4

＆＃13;

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
.locationName {
  text-align: center;
  padding: 0px 0px 20px 20px;
}

＆＃13;

<div class="row" id="locations">

  <div class="locationName">
    City
  </div>

  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="2.jpg">
    </div>
  </div>

  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="1.jpg">
    </div>
  </div>

  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="2.jpg">
    </div>
  </div>
</div>

＆＃13;

显然，代码在＆＃34;行＆＃34;内翻了一倍。格。

Answer 1

我看到了你的问题。实际上与盒子高度存在冲突。要快速修复此问题，您可以增加拇指高度相等。或者你可以看到下面的示例代码。

    <div class="row" id="locations">
  <div class="col-lg-12 col-sm-12 locationName">City</div>
  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail"> <img src="2.jpg"> </div>
  </div>
  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail"> <img src="1.jpg"> </div>
  </div>
  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail"> <img src="2.jpg"> </div>
  </div>
  <div class="col-lg-12 col-sm-12 locationName"> City </div>
  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail"> <img src="2.jpg"> </div>
  </div>
  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail"> <img src="1.jpg"> </div>
  </div>
  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail"> <img src="2.jpg"> </div>
  </div>
</div>

Answer 2

将以下代码从row中删除，这应该按照您想要的方式进行。

<div class="locationName">
    City
</div>

您遇到此问题，因为您可以在图片（链接）中看到您只要中间图像稍微向下移动，因此它每次都会影响 下一行 的标题。

Answer 3

看起来与您正在使用的引导程序存在冲突。尝试使用类行移动div前的标题（City）。

<div class="locationName">
    City
</div>

<div class="row" id="locations">
    <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
            <img src="2.jpg">
        </div>
    </div>

    <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
            <img src="1.jpg">
        </div>
    </div>

    <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
            <img src="2.jpg">
        </div>
    </div>
</div>

Answer 4

将完整的12列网格添加到locationName类，以便它占用整行并强制其他列之间的中断。正如您目前所拥有的那样，它正在尝试内联，这是在最长的图像之后。

<div class="row" id="locations">

  <div class="col-xs-12 locationName">
    City
  </div>

  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="2.jpg">
    </div>
  </div>

  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="1.jpg">
    </div>
  </div>

  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="2.jpg">
    </div>
  </div>
</div>

Answer 5

试试这个：

        <div class="container" id="locations">
<div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="2.jpg">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="1.jpg">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="2.jpg">
            </div>
        </div>
        </div>
        <div class="locationName">
            City
        </div>
<div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="2.jpg">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="1.jpg">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="2.jpg">
            </div>
        </div>
</div>
</div>

Answer 6

你可以像这样使用中心标签

＆＃13;

selectDiv(){
//what should i write here
}

＆＃13;

带文字的Div不会保持居中

6 个答案: