fejléc
Gyakori kérdések Belépés Új kérdés Véletlen kérdés
Keresés
Kezdőoldal » Számítástechnika » Weblapkészítés » Megoldható ez? 3 column...

Megoldható ez? 3 column helyett 4?

Figyelt kérdés

Van egy html weblap sablon, amit letöltöttem, hogy megcsináljam magamnak weblapnak. Van egy rész, ahol három képet, és alá szöveget lehet berakni, és ezt akarom átalakítani 4 db-ra. Ha berakok még egyet, akkor már alá rakja. Tehát 3 sáv helyett négyet hogy tudok? Bocsi, kezdő vagyok. Kód:


<!-- Column 1 -->


<div class="col-lg-4 col-md-4 col-sm-12 wow fadeInUp animated" data-wow-delay="0.3s" data-wow-offset="50" data-wow-duration="1s">

<div class="block-one block">

<img src="images/icon1.png" width="150" class="img-responsive pm-inline" alt="icon" />


<h6 class="pm-column-title">Családi ügyek</h6>

<div class="caret-down"><i class="fa fa-caret-down"></i></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<div class="btn-blk"><a href="#" class="pm-rounded-btn">Bővebben</a></div>


</div>

</div>

<!-- Column 1 end -->



#weblap #HTML #sablon #Code #kód
2015. okt. 11. 20:45
 1/8 A kérdező kommentje:

a style-ban erről a block-one-ról ennyi van:

img.img-responsive.pm-inline {

text-align: center;

margin: 0 auto;

}

h6.pm-column-title {

margin-top: 35px;

font-family: 'Oswald', sans-serif;

font-size: 30px;

text-align: center;

text-transform: capitalize;

}

.block-one {

padding: 60px 15px 47px 15px;

}

.block {

border-right: 2px solid rgba(199, 199, 199, 0.48);

}

.pm-rounded-btn {

width: auto;

height: auto;

display: inline;

background-color: #2a313a;

min-width: 100px;

display: inline-block;

padding: 10px 30px;

text-decoration: none;

text-transform: uppercase;

font-family: 'Open sans';

font-size: 14px;

font-weight: bold;

color: white !important;

margin: 15px 0px;

text-align: center;

border-radius: 99px;

/*-webkit-border-radius: 99px;

-o-border-radius: 99px;*/

transition: all 0.4s;

/*-moz-transition: all 0.4s;

-webkit-transition: all 0.4s;

-o-transition: all 0.4s;*/

}

.btn-blk{

text-align: center;

}

.caret-down {

text-align: center;

padding: 0 0 17px 0;

}

2015. okt. 11. 20:47
 2/8 anonim ***** válasza:

"Van egy html weblap sablon, amit letöltöttem"

Honnan?


"<div class="col-lg-4 col-md-4 col-sm-12"

Ez nagyon a Bootstrap nevű keretrendszerre

[link]

utal. A col-lal kezdődő osztálynevű blokkok az oszlopok.

2015. okt. 11. 21:04
Hasznos számodra ez a válasz?
 3/8 A kérdező kommentje:
Themewagon.com azthiszem a téma forrásának helye.
2015. okt. 11. 21:09
 4/8 A kérdező kommentje:
ÉS mit kellene átírnom ahhoz, hogy elférjen egymás mellett négy? Amit próbáltam (<img src="images/icon1.png" width="150") az csak a képre vonatkozik, úgyhogy nem volt jó
2015. okt. 11. 21:11
 5/8 Argloss ***** válasza:

<!-- Column 1 -->


<div class="col-lg-3 col-md-3 col-sm-12 wow fadeInUp animated" data-wow-delay="0.2s" data-wow-offset="50" data-wow-duration="1s">

<div class="block-one block">

<img src="images/icon1.png" width="200" class="img-responsive pm-inline" alt="icon" />


<h6 class="pm-column-title">personal case</h6>

<div class="caret-down"><i class="fa fa-caret-down"></i></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla sem ut nisl auctor, sit amet auctor tortor mollis. Aliquam nibh elit, tincidunt sit amet orci ac, pellentesque pretium mi.</p>

<div class="btn-blk"><a href="#" class="pm-rounded-btn">meet our trainers</a></div>


</div>

</div>

<!-- Column 1 end -->


<!-- Column 2 -->


<div class="col-lg-3 col-md-3 col-sm-12 wow fadeInUp animated" data-wow-delay="0.4s" data-wow-offset="50" data-wow-duration="1s">

<div class="block-one block">

<img src="images/icon2.png" width="200" class="img-responsive pm-inline" alt="icon" />


<h6 class="pm-column-title">Business Case</h6>

<div class="caret-down"><i class="fa fa-caret-down"></i></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla sem ut nisl auctor, sit amet auctor tortor mollis. Aliquam nibh elit, tincidunt sit amet orci ac, pellentesque pretium mi.</p>


<div class="btn-blk"><a href="#" class="pm-rounded-btn">view programs</a>

</div>


</div>

</div>

<!-- Column 2 end -->


<!-- Column 3 -->


<div class="col-lg-3 col-md-3 col-sm-12 wow fadeInUp animated" data-wow-delay="0.6s" data-wow-offset="50" data-wow-duration="1s">

<div class="block-one block">

<img src="images/icon3.png" width="200" class="img-responsive pm-inline" alt="icon" />


<h6 class="pm-column-title">Business Case</h6>

<div class="caret-down"><i class="fa fa-caret-down"></i></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla sem ut nisl auctor, sit amet auctor tortor mollis. Aliquam nibh elit, tincidunt sit amet orci ac, pellentesque pretium mi.</p>


<div class="btn-blk"><a href="#" class="pm-rounded-btn">view programs</a>

</div>


</div>

</div>

<!-- Column 3 end -->


<!-- Column 4 -->


<div class="col-lg-3 col-md-3 col-sm-12 wow fadeInUp animated" data-wow-delay="0.8s" data-wow-offset="50" data-wow-duration="1s">

<div class="block-one">

<img src="images/icon4.png" width="200" class="img-responsive pm-inline" alt="icon" />


<h6 class="pm-column-title">special case</h6>

<div class="caret-down"><i class="fa fa-caret-down"></i></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla sem ut nisl auctor, sit amet auctor tortor mollis. Aliquam nibh elit, tincidunt sit amet orci ac, pellentesque pretium mi.</p>


<div class="btn-blk">

<a href="#" class="pm-rounded-btn">view classes</a>

</div>


</div>

</div>

<!-- Column 4 end -->

2015. okt. 11. 21:47
Hasznos számodra ez a válasz?
 6/8 A kérdező kommentje:
Köszönöm!
2015. okt. 11. 21:49
 7/8 anonim ***** válasza:
A bootstrap egy 12 egység széles hálóval dolgozik, ezt kell szétosztanod négy felé. Ha ugyanolyan széles oszlopokat akarsz, akkor 4 db "col-lg-3" class-t hazsnálsz.
2015. okt. 12. 11:03
Hasznos számodra ez a válasz?
 8/8 A kérdező kommentje:
Értem, köszönöm a válaszokat mindenkinek!
2015. okt. 12. 19:22

Kapcsolódó kérdések:

Számítástechnika főkategória kérdései »
Számítástechnika - Weblapkészítés kategória kérdései »



Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!