ブートストラップモーダルボックスはブラウザイズに適していません -- css フィールド と image フィールド と twitter-bootstrap フィールド と modal-dialog フィールド と slider フィールド 関連 問題

Bootstrap Modal Box does not fit properly to browsersize












0
vote

問題

日本語

私は今数週間で私のモーダルIMGスライダーを歩み回っています。私は今働いています - 私は今働いています - ウィンドウがSM / XSに行くときには、WOBBLEといくつかのトリミングがありました.IMGスライダのサイズを変更することが可能です。モーダルボックスは、IMGが常に最大で最大です。幅/高さすべての側面に少しスペースを残すことができます 他の問題は私のコードで何かを変更したかもしれないということです。モーダルの修正を試みたので、モーダルはもう少し崩壊しないので、灰色の背景をクリックするだけで折れています。閉じるボタンをクリックすることです。 そしてそれ以来、arqueeは後の後に走るのをやめます、そして

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; }
英語

I have fiddeled around with my modal img slider from bootstrap for weeks now- I have got it kinda working now - with a wobble and some cropping when the window goes sm/xs.. wondering weather it's possible to resize the img slider and the modal box so the img is always at the max. width/height it can get leaving a little space to all sides the other problem is, that I might have changed anything in my code.. because since I've tried to fix the modal, the modal does not collapse any more when I just click on the grey background, the only way to let it collapse is to click the close button. And the marquee does stop running after a while since then, too

Appart of the Bootsrtap css and jquery I used that code:

<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;     } 
</div
              
   
   

回答リスト

0
 
vote
vote
ベストアンサー
 

デフォルトのブートストラップファイルだけを使用してライトボックスを実装することはできません。慣習的にそれを構築することができるのを確実ですがなぜホイールを再発明するのですか?私の提案は、誰かがすでに作成されたプラグインを使用することです。

いくつかの提案:

Nivo Lightbox は素晴らしいライトボックスで、MITライセンスがあります。 Bootstrapに関する非常にわずかなCSS互換性の問題があります(ボックスサイジング:ボーダーボックスとの対応)が、それが非常に修正が簡単です。

bootstrap 3 lightbox 。私は実際にこれを使ったことがないが、あなたが望んでいることをすることができるようです。 GNU General Publicライセンスがあります。

 

It's not possible to implement a lightbox using just the default Bootstrap files. Sure you could build it in customly but why reinvent the wheel? My suggestion is to use a plugin that someone has already created.

Some suggestions:

Nivo Lightbox is a great lightbox and has a MIT license. It has a very slight css compatibility issue with Bootstrap (to do with box-sizing: border-box) but that is very easy to fix.

Bootstrap 3 Lightbox. I've never actually used this but it seems to be able to do what you are wanting. Has a GNU General Public License.

</div
 
 
       
       

関連する質問

0  Android Matilelスライダー。ラベルなし  ( Android materil slider no label ) 
私のプロジェクト com.google.android.material:material:1.3.0-alpha02 には、最後の素材ライブラリをご覧ください。それから私はレイアウトに実装しました <事前> <コード> <LinearLayout ...

11  スライド後のjQueryスライダコール機能  ( Jquery slider call function after slide ) 
私はWebアプリケーション上でスコアを設定するために使用しているjQuery Silderを持っています。ユーザーが送信ボタンをクリックしたが、クライアントはAjaxスタイルを更新するようになったままにするようにOrignallyにいました。 これは見つけられ...

0  jqueryはリスを滑ります  ( Jquery sliding through lis ) 
私はスクリーンを流れるふたの長いリストを持っています、私はそれを望みますので、スライドはどちらの方向をクリックするかを1つずつクリックします。私はそれがループするのが好きなので、可能な限りプラグインから離れて操縦したいです。 私はその価値を増やすためにMarg...

4  スクロール可能なカルーセル、プラグインのないjQueryのスライダー - 最も簡単な方法  ( Scrollable carousel slider in jquery without any plugin the simplest way ) 
私はサイクルアニメーションを備えたjQueryスライダ(スクロール可能プラグインのような)についてチュートリアルを探しています。 プラグインがなければ、最も簡単な方法、チュートリアル ...

2  jQuery UIスライダー:プログレッシブスケール部門とグリッド  ( Jquery ui slider progressive scale divisions and grid ) 
下の写真のようにスライダーをする必要があります。 スタンダードjQuery UIスライダを使うのはいいだろうが、デフォルトでスケール部門をサポートしておらず、不規則なスケールをするのは難しいです(1 | 2 | 4 | 5; 5 | 5 10 | 20)...

0  ポストバックのAjaxマルチハンドルスライダパラメータを正しく変更します  ( Properly changing ajax multihandle slider parameters on postbacks ) 
VS2010では、VB.NET CodeBehind ASPXページがあり、Ajax MultihHandlsLider拡張機能を使用して数値値で検索結果をフィルタリングしています。 FISTLY、マルチハンドルスライダーはデザイナーに表示されません......

4  JQuery-UIスライダをCasperjsで移動する方法  ( How to move jquery ui slider with casperjs ) 
を移動する方法はあります。 casperjs ? 私はまたこの github issue を検索している間にスライダの左右に Handle を移動させます。しかし、これは私のためにもうまくいかない。 任意のアイデア? ...

0  スライダーアニメーションを作る方法  ( How to make slider animation ) 
サイドスライダにいくつかの異なるタイプのアニメーションを作る方法。ライブラリーがありますか。ライブラリがあれば私に提供してください。 ...

1  スライドショー遷移効果を実装する方法  ( How to implement slideshow transition effects ) 
スライドショーの遷移効果を考えると、フェードインやフェードアウトの2つのアニメーションメソッドを使用する準備ができているので、他の人はCSSによって実装されなければなりません。そうでない場合は、イエスの場合は私を手配してください。どのように私はそれらのいくつか...

0  ロードされたjQueryスライダプラグインを返すこのオブジェクトにはメソッドがありません  ( Any loaded jquery slider plugin return this object has no method ) 
だから、このサイトのホームページにスライダーを実装しようとしています、そして私はNivosliderを試していますが、そのオブジェクトにNivosliderなどのメチュッドがなかったと言っていました。 だから私はそれをあきらめて、私はCCSlider、有料スラ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有