Question

我在我的网页上的引导程序中显示模式中的图像，但它一直在左边并阻碍我之前的箭头。如何使图像居中？我怎样才能调整模态本身的大小？

<div class="container">
            <div class="row">
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="img/base/BASE - 163E.PNG"></a></div>             
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4 <br /> inin" href="#"><img class="thumbnail img-responsive" src=""></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src=""></a></div>
</div>
        </div>
<div class="modal" id="myModal" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal"></button>
        <h3 class="modal-title"></h3>
    </div>
    <div class="modal-body">
        <div class="carousel" id="modalCarousel">

          <div class="carousel-inner">

          </div>

          <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>

Answer 1

您可以按照我的演示代码，它可以帮助您。

$('#RegisterBtn').click(function(){
	$('#RegisterModal').modal();
});
$('#loginBtn').click(function(){
	$('#loginModal').modal();
});

.bottom {
   position:fixed;
   left:0px;
   bottom:0px;
   width:100%;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">




<div class="container-fluid">
    <div class="row">
        <div><a href="#" class="btn btn-sucess btn-block btn-register" id="RegisterBtn">Register</a></div>

</div>

<div id="RegisterModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <form action="/register" method="post" class="form-horizontal" id="">
                    <div class="control-group">
                        <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
                            <input type="text" id="fullname" name="fullname" class="form-control" placeholder="Name" required="" minlength="3">
                        </div>
                        <p class="help-block"></p>
                    </div>
                    <div class="control-group">
                        <div class="input-group input-group-sm">
                            <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
                            <input id="username-reg" type="email" required="" name="username" class="form-control" placeholder="Your email address" aria-invalid="true">
                        </div>
                        <p class="help-block"></p>
                    </div>
                    
                  
               
                    <div class="control-group text-center">
                        <button type="submit" id="emailSubmit" class="btn btn-success btn-sm btn-block" title="Submit"> Submit </button>
                        <br>
                 
                        <p class="help-block" style="display:none;"></p>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

            <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

如何在bootstrap中将模式中的内容居中？

1 个答案: