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

【问题标题】：How to add container and image in modal bootstrap如何在模态引导程序中添加容器和图像
【发布时间】：2016-05-19 21:05:45
【问题描述】：

我想制作一个在 .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%;}

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

如果我不包含容器，则图像将在左侧。

问题：我怎样才能制作一个在模态体内有一个容器和图像（在中间）的模态？

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-modal

【解决方案1】：

引导模式的默认宽度为 600 像素。您可以添加自定义 CSS 或加载更宽的图像。如果您的图像宽度接近 600 像素，则不需要“容器”。您可以添加“margin:0 auto;”居中对齐较小的 img。检查这个例子。

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>My Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Launch Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
        <div class="modal-body">
         
            <img class="img-responsive" style="margin:0 auto;" src="http://placehold.it/260x340" alt="">
                   
        </div>
        
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

【讨论】：

哇，谢谢，我能问点什么吗？如果我想输入一些段落，这意味着我也必须设置带有自动边距的段落？
测试
这样吗？
使用
test
代替。

【解决方案2】：

尝试使用引导网格系统Offsetting columns：

<div class="modal-body">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <img src="http://placehold.it/260x340" alt="">
        </div>
    </div>
</div>

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

这将完成工作。

html代码：

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

css代码：

.img-responsive{
    margin:0 auto;
}

【讨论】：