Bootstrap-Gitter für breites Layout im Responsive Design

Ich benutze Bootstrap-Grid für meine Website. UI-Design ist breit und ich habe ein Problem mit dem Layout.Ich wusste nicht, Layout möglicherweise Problem zuerst, aber nachdem ich Code für mobile und Tablet-Geräte geschrieben habe, sah ich ein Problem.Bootstrap-Gitter für breites Layout im Responsive Design

Ich habe Fotogalerie in einer der Seiten der Website und ich mit Lightbox2 dafür gab ich jeden limargin-left:4% .because meine Website reagiert ich nicht fix Anzahl der li für jede Zeile so meinen Code für diesen Teil verwenden enthielt 1 ul und 12 li nicht 3 ul mit 4 li in jedem von ihnen. hier, wo ich mit Problem konfrontiert, zuletzt li in jeder Zeile bekommen margin-left:4%, und wegen dieser Marge ul kann nicht in der Mitte der Seite beheben, meiner Meinung nach ist mein Layout nicht korrekt und sogar UI ist breit, ich muss Container oder verwenden Wrapper für den Inhalt der Website. here ist Galerie-Seite.

HTML-Code für die Hauptinhaltsteil (Kopf- und Fußzeile sind in separaten div)

<div class="content row"> 
     <div class="head-style col-md-12 col-sm-12 col-xs-12"> 
      <div class="title-pack col-md-12 col-sm-12 col-xs-12"> 
       <span class="line visible-sm-block"></span> 
       <span class="visible-sm-block tittle-style">کتابخانه</span> 
       <!-- <span class=" pull-right line visible-sm-block"></span> --> 
      </div> 
      <div class="row library-info"> 
       <div class="library-box col-md-9 col-sm-8 col-xs-12"> 
        <div class="col-md-11 col-sm-11 col-xs-12 "> 
         <ul> 
           <li class=""> 
            <a href="images/gallery1/image-1.jpg" title="Item 1 title ..." data-desc="Item1 a small cake baked in a cup-shaped foil or paper case" rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-1.jpg" alt="Image description for search engins" /> 
             <h4>تراژدی تنهایی</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-2.jpg" title="Item 2 title ..." data-desc="Item 2 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-2.jpg" alt="Image description for search engins" /> 
             <h4>سرخ و سفید</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-3.jpg" title="Item 3 title ..." data-desc="Item 3 A small, chocolate-covered candy with a hard or soft center." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-3.jpg" alt="Image description for search engins" /> 
             <h4>پاییز فصل آخر سال است</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-4.jpg" title="Item 3 title ..." data-desc="Item 4 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-4.jpg" alt="Image description for search engins" /> 
             <h4>نوبت</h4> 
             <p>10000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-1.jpg" title="Item 1 title ..." data-desc="Item1 a small cake baked in a cup-shaped foil or paper case" rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-1.jpg" alt="Image description for search engins" /> 
             <h4>تراژدی تنهایی</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-2.jpg" title="Item 2 title ..." data-desc="Item 2 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-2.jpg" alt="Image description for search engins" /> 
             <h4>سرخ و سفید</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-3.jpg" title="Item 3 title ..." data-desc="Item 3 A small, chocolate-covered candy with a hard or soft center." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-3.jpg" alt="Image description for search engins" /> 
             <h4>پاییز فصل آخر سال است</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-4.jpg" title="Item 3 title ..." data-desc="Item 4 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-4.jpg" alt="Image description for search engins" /> 
             <h4>نوبت</h4> 
             <p>10000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-1.jpg" title="Item 1 title ..." data-desc="Item1 a small cake baked in a cup-shaped foil or paper case" rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-1.jpg" alt="Image description for search engins" /> 
             <h4>تراژدی تنهایی</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-2.jpg" title="Item 2 title ..." data-desc="Item 2 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-2.jpg" alt="Image description for search engins" /> 
             <h4>سرخ و سفید</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-3.jpg" title="Item 3 title ..." data-desc="Item 3 A small, chocolate-covered candy with a hard or soft center." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-3.jpg" alt="Image description for search engins" /> 
             <h4>پاییز فصل آخر سال است</h4> 
             <p>15000 تومان</p> 
            </a> 
           </li> 
           <li class=""> 
            <a href="images/gallery1/image-4.jpg" title="Item 3 title ..." data-desc="Item 4 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]"> 
             <img src="images/gallery1/thumb-4.jpg" alt="Image description for search engins" /> 
             <h4>نوبت</h4> 
             <p>10000 تومان</p> 
            </a> 
           </li> 
         </ul> 
         <div style="clear:both;"></div> 
        </div> 
       </div> 
<!-- ~~~~~~ <>< ~~~~ <>< ~~~~ <>< ~~~~~~~~ Start of sidebar part ~~~~~~ <>< ><> ~~~~~ <>< ~~ <>< ~~~~~~~~ -->    
      <div class="sidebar col-md-3 col-sm-4 col-xs-12"> 
       <div class="sidebarbox "> 

        <div class=" library-category col-md-12 col-sm-12 col-xs-12"> 
         <h3>دسته بندی کتاب</h3> 
          <div> 
           <div class="library-category-option"> 
            <a href="">زندگینامه</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">ادبیات</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">کودک و نوجوان</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">روانشناسی</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">هنر</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">علوم اجتماعی</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">اقتصاد</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">تجارت</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">مدیریت</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">گوناگون</a> 
           </div> 
           <div class="library-category-option"> 
            <a href="">همه</a> 
           </div> 
           <div style="clear:both;"></div> 
          </div> 
         </div> 
         <div class="search-sidebar col-md-12 col-sm-12 col-xs-12"> 
          <h3>جستوجو کتاب</h3> 
          <div class="dark"> 
           <form role="search" method="get" class="wproduct-search" action=""> 

            <span><input placeholder="جستجو کتاب" type="text" class="search square"><input type="button" value="Search"></span> 
           </form> 
          </div> 
         </div> 
         <div class="letter-news col-md-12 col-sm-12 col-xs-12"> 
          <h3>خبرنامه</h3> 
          <form> 
           <input type="" name="" placeholder="نام شما" > 
           <input class="input-dis" type="" name="" placeholder="ایمیل شما" > 
           <button class="send-button center-margin">ارسال</button> 
          </form> 
          <div style="clear:both;"></div> 
         </div> 
        </div> 
       </div> 
       <div style="clear:both;"></div> 
       </div> 
      </div> 
     </div>

CSS-Code für diesen Teil

.content{ 
    padding: 0 20px; 
} 
.aboutus, 
.news-index, 
.book-library, 
.head-style, 
.double, 
.best, 
.pages{ 
    min-height: 230px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 
.ourservice, 
.besty, 
.phisical-shop, 
.library-info, 
.about-us, 
.writer-crit, 
.gallery{ 
    margin-top: 23px; 
    margin-bottom: 25px; 
} 
.ourservice-box > div, 
.phisical-store > div, 
.library-box > div, 
.about-us-box > div, 
.writer-crit-box > div, 
.gallery-box > div{ 
    min-height: 1000px; 
} 
.library-box{ 
    min-height: 1200px; 
    display: inline-block; 
    padding: 0; 
} 
.sidebar{ 
    min-height: 600px; 
    display: inline-block; 
    padding: 0; 
} 
.sidebar .tab-content{ 
    margin-top: 60px; 
} 
.sidebarbox{ 
    width: 100%; 
    min-height: 500px; 
    float: left; 
} 
.best-sells, 
.letter-news, 
.news-sidebar, 
.search-sidebar{ 
    height: 535px; 
    padding-bottom: 20px; 
    background: rgba(223,221,224,0.8); 
}

Ich habe auch lightbox.css und lihtbox. js. Ich hoffe, mein Problem klar zu erklären und einen Rat von Ihnen über die Probleme zu suchen.

Quelle

2016-08-08 mkafiyan

Remove float: right; von li und add> display: Inline-Block; Hinzufügen von Stil zu der ul Text-align: center –

Um Listenelemente in einem UL Zentrum:

ul add>text-align: center;

Remove Eigenschaft float von li und ersetzen.

li add>display: inline-block;

http://jsfiddle.net/3Ezx2/3/

Quelle

2016-08-08 05:18:13

Ja, es funktioniert gut, also kein Problem mit meinem Layout? es muss keine Breite zu div.content hinzugefügt werden? – mkafiyan

Es sieht gut aus hier verpassen, @mimi hinzufügen Breite: Anzahl px; und Überlauf: versteckt; zu den Galerie Thumbnails würde ich empfehlen. Denn wenn ich debuggen und geben zu viele Zeichen innen wie das, was ich hier getan habe:

15000 تومان 15000 تومان 15000 تومان 15000 تومان

die Galerie bricht. –

Ja, ich muss Max-Character für jedes Thumbnail definieren. Danke: D – mkafiyan

können Sie verwenden einfach diese Bootstrap Klasse

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="list-inline text-center"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
</ul>

Quelle

2016-08-08 07:27:23 NoOneCare

Bootstrap-Gitter für breites Layout im Responsive Design

Antwort

Verwandte Themen