Question

我想制作一个在.modal-body中有容器和图像的模态。

代码：

<div class="add-data">
    <a href="" data-toggle="modal" data-target="#largeModal">
        <img class="img-responsive" src="http://placehold.it/260x340" alt="">
        <h4 class="bold">lipsum</h4>
    </a>
</div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h3 class="modal-title uppercase capital bold " id="myModalLabel">portfolio</h3>
            </div>
            <div class="modal-body">
                <div class="container">
                  <img src="http://placehold.it/260x340" alt="">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

.img{width:100%;}

我的代码的结果是图像完全（我的意思是采取整个模态体）。

如果我没有包含容器，那么图像将位于左侧。

问题：如何在模态体内创建一个容器和图像（中间）的模态？

Answer 1

这将完成工作。

HTML代码：

<img class="img-responsive" src="http://placehold.it/260x340" alt="">

css代码：

.img-responsive{
    margin:0 auto;
}

Answer 2

Bootstrap模式的默认宽度为600px。您可以添加自定义CSS或加载更宽的图像。如果图像宽度接近600px，则不需要“容器”。你可以添加“margin：0 auto;”中心对齐较小的img。查看此示例。

#include <iostream>
#include <cstdlib>

int hailstone(const int n) {
    return n % 2 ? 3 * n + 1 : n / 2;
}

int largest(const int n, int largestSoFar = 0) {
    int h = hailstone(n);
    if (h > largestSoFar)
        largestSoFar = h;
    if (h == 1)
        return largestSoFar;
    return largest(h, largestSoFar);
}

int main() {
    int l = largest(7);
    std::cout << l << std::endl;
    system("pause");
    return 0;
}

Answer 3

尝试使用bootstrap网格系统this question：

{{1}}

希望这有帮助。

Answer 4

您可以使用container-fluid占据modal-body宽度的100％，然后使用center-block将图像居中，但不会占据模式的整个宽度因为你的图像只有260像素宽。

http://www.codeply.com/go/2H5kFMkqGo

Answer 5

This应该有用。

.img-responsive.img-center {
  margin: 0 auto;
}

<div class="add-data">
  <a href="" data-toggle="modal" data-target="#largeModal"><img class="img-responsive" src="http://placehold.it/260x340" alt="">
    <h4 class="bold">lipsum</h4></a>
</div>


<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title uppercase capital bold " id="myModalLabel">portfolio</h3>
      </div>
      <div class="modal-body">
        <div class="container">
          <img class="img-responsive img-center" src="http://placehold.it/260x340" alt="">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

如何在模态引导程序中添加容器和图像

5 个答案: