个人中心
gpt4 book ai didi

css - Bootstrap 模态框不适合浏览器大小

转载 作者：行者123 更新时间：2023-11-28 10:13:43 24 4
gpt4 key购买 nike

我已经从 bootstrap 摆弄我的模式 img slider 几个星期了 - 我现在有点工作了 - 当窗口变成 sm/xs 时会出现摆动和一些裁剪.. 想知道天气是否可以调整 img slider 的大小和模式框，因此 img 始终处于最大值。宽度/高度它可以在所有方面留下一点空间另一个问题是，我可能更改了我的代码中的任何内容。因为自从我尝试修复模态后，当我单击灰色背景时，模态不再折叠，这是让它折叠的唯一方法是点击关闭按钮。从那以后，字幕也确实在一段时间后停止运行

Bootsrtap css 和 jquery 的 Appart 我使用了那个代码:

<html>
<head>
    <title>Anton Hörl, München Skulpturen und Grafiken</title>
    <meta content="" name="keywords">
    <meta content="" name="description">        
    <meta content="index,follow" name="robots">
    <meta content="" name="author">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
    <link rel="stylesheet" type="text/css" href="css/zeichnungen.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />


</head>

<body>
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/custom.js"></script>
    <script src="js/bootstrap.js"></script>


    <marquee scrollamount="1" scrolldelay="1"> nächste Ausstellung am...</marquee>
<!--NAVBAR-->
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <li class="active"><a class="navbar-brand" href="#"><img src="Bilder/grafik4.jpg" type="picture/jpg"/></a></li>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">

            <li><a href="#">Figuren</a></li>
            <li><a href="#">Zeichnungen</a></li> 
            <li><a href="#">Vita</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Englisch</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Kontakt und Impressum<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">A.H</a></li>
                <li><a href="#">Kontakt</a></li>
                <li class="divider"></li>
                <li><a href="#">Webseitengestaltung</a></li>
                <li><a href="#">Foto und Film</a></li>
                <li class="divider"></li>
                <li><a href="#">Copyright 2014</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <!--NAVBAR ENDE-->


    <div class="container"data-toggle="modal" data-target="#myModal">
      <div class="row">
        <h1>Zeichnungen</h1>
        <div class="row">
          <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"data-target="#myModal" data-slide-to="0"><img class="thumbnail img-responsive active" src="Zeichnungen/1.jpg"></a></div>
          <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"data-target="#myModal" data-slide-to="1"><img class="thumbnail img-responsive" src="Zeichnungen/2.jpg"></a></div>
          <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"data-target="#myModal" data-slide-to="2"><img class="thumbnail img-responsive" src="Zeichnungen/3.jpg"></a></div>
          <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"data-target="#myModal" data-slide-to="3"><img class="thumbnail img-responsive" src="Zeichnungen/4.jpg"></a></div>
          <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"data-target="#myModal" data-slide-to="4"><img class="thumbnail img-responsive" src="Zeichnungen/5.jpg"></a></div>
          <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"data-target="#myModal" data-slide-to="5"><img class="thumbnail img-responsive" src="Zeichnungen/6.jpg"></a></div>
          <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 7" href="#"data-target="#myModal" data-slide-to="6"><img class="thumbnail img-responsive" src="Zeichnungen/7.jpg"></a></div>
          <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"data-target="#myModal" data-slide-to="7"><img class="thumbnail img-responsive" src="Zeichnungen/8.jpg"></a></div>
         </div>
      </div>
    </div>

    <!-- Modal -->
      <div class="modal fade container" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog-row row">
          <div class="modal-content col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-7 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-5">
            <div class="modal-header">
              <button type="button" class="btn btn-default" data-dismiss="modal">&times;</button>
            </div>
                <div class="modal-body">
                    <div id="modalCarousel" class="carousel">
                        <div class="carousel-inner">
                            <div class="item active" title="Image 1">
                                <h3 class="modal-title">Image 1</h3>
                                <a href="#" title="Image 1"><img class="thumbnail img-responsive" src="Zeichnungen/1.jpg"></a>
                            </div>
                            <div class="item " title="Image 2">
                                <h3 class="modal-title">Image 2</h3>
                                <a href="#" title="Image 2">
                                    <img class="thumbnail img-responsive" src="Zeichnungen/2.jpg">
                                </a>
                            </div>
                            <div class="item" title="Image 3"><h3 class="modal-title">Image 3</h3>
                                <a href="#" title="Image 3">
                                    <img class="thumbnail img-responsive" src="Zeichnungen/3.jpg">
                                </a>
                            </div>
                            <div class="item" title="Image 4"><h3 class="modal-title">Image 4</h3>
                                <a href="#" title="Image 4">
                                    <img class="thumbnail img-responsive" src="Zeichnungen/4.jpg">
                                </a>
                            </div>
                            <div class="item" title="Image 5"><h3 class="modal-title">Image 5</h3>
                                <a href="#" title="Image 5">
                                    <img class="thumbnail img-responsive" src="Zeichnungen/5.jpg">
                                </a>
                            </div>
                            <div class="item" title="Image 6"><h3 class="modal-title">Image 6</h3><p class="modal-title">Größe:</p>
                                <a href="#" title="Image 6">
                                    <img class="thumbnail img-responsive" src="Zeichnungen/6.jpg">
                                </a>
                            </div>
                            <div class="item" title="Image 7"><h3 class="modal-title">Image 7</h3>
                                <a href="#" title="Image 7">
                                    <img class="thumbnail img-responsive" src="Zeichnungen/7.jpg">
                                </a>
                            </div>
                            <div class="item" title="Image 8"><h3 class="modal-title">Image 8</h3>
                                <a href="#" title="Image 8">
                                    <img class="thumbnail img-responsive"Style="width: 100%; height: auto; margin-top:25%;" src="Zeichnungen/8.jpg">
                                </a>
                            </div>  
                        </div>
                        <a class="carousel-control left" href="#modalCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"src="Bilder/arror left.gif"Style="width: 95%; height: auto;transform: translate(5%); margin-top:50%;"></i></a>
                        <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"src="Bilder/arror right.gif"Style="width: 95%; height: auto;transform: translate(5%); margin-top:50%;"></i></a>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
</body>

        .thumbnail {margin-bottom:10px;}
    .modal-header {
        text-align: right;
    }
    .modal-body {
        max-height: 95% !important;
        max-width: 95% !important;
        padding: 20px !important;

    }
    .modal-dialog-row {
        z-index:1050;
        right:auto;
        padding:10px;
        padding-top:30px;
        padding-bottom:10px;
        margin-right:auto;
    }
    .modal-content {
        background-clip: padding-box;
        background-color: transparent !important;
        border: 0px solid rgba(0, 0, 0, 0.2) !important;
        border-radius: 0px !important;
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5)!important;
        outline: medium none;
        position: relative;
        text-align:center;
        color: white;
    }


    .carousel-inner > .item > img, 
    .carousel-inner > .item > a > img {
        line-height: 1;

    }

    .carousel-control.left,.carousel-control.right{
      background-image:none;
      margin-top:5%;
      padding-right: 5%;
      width:5%;
    }

    .carousel-control .glyphicon-chevron-left,
     .carousel-control .glyphicon-chevron-right, 
     .carousel-control .icon-prev, .carousel-control .icon-next {
        margin-left: 10px !important;
        margin-right: -15px !important;   
    }
    button.btn-default {
        background: none repeat scroll 0 0 white!important;
        border: 10px none!important;
        border-radius: 20px !important;
        color: grey!important;
        height: 30px!important;
        margin-right: 10px !important;
        width: 30px!important;

    }
    .btn-default  {
        color: grey!important;
        font-size: 45px!important;
        line-height: 0!important;
        opacity: 1!important;
        text-shadow: 1px 2px 2px rgba(145, 168, 129, 1)!important;
    }

最佳答案

仅使用默认的 Bootstrap 文件是不可能实现灯箱的。当然你可以定制它，但为什么要重新发明轮子呢？我的建议是使用某人已经创建的插件。

一些建议:

Nivo Lightbox是一个很棒的灯箱，拥有麻省理工学院的许可证。它与 Bootstrap 有一个非常轻微的 css 兼容性问题(与 box-sizing: border-box 有关)，但这很容易修复。

Bootstrap 3 Lightbox .我从来没有真正使用过这个，但它似乎能够做你想做的事。拥有 GNU 通用公共(public)许可证。

关于css - Bootstrap 模态框不适合浏览器大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24294696/

24 4 0
文章推荐： css - 折叠菜单时导航丸的子菜单行为
文章推荐： css - 通过下面的背景颜色为具有透明度的灰度(但 RGB)图像着色
文章推荐： javascript - 我如何将动态日期传递给我的 asp.net MVC 应用程序中的 Javascript
文章推荐： html - 带底线的导航菜单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com