قرار دادن 4 دیو در وسط صفحه به شکل زیر

[yasharhi]

من مثل شکل زیر می خواهم 4 تا دیو رو در وسط صفحه نمایش بدم - با این کد میتونم این کار رو انجام بدم ؟




<div class="container">
<div class="row">


<div class="col-lg-2 col-lg-offset-2">
first div
</div>

<div class="col-lg-2 ">
second div
</div>

<div class="col-lg-2 ">
3 div
</div>

<div class="col-lg-2 ">
4 div
</div>


</div>
</div>





عکس :
http://www.upload7.ir/imgs/2014-07/62617364920043616401_thumb.jpg (http://www.upload7.ir/viewer.php?file=62617364920043616401.jpg)

[masoud_pnu]

بله.میشه.منتها هرکدام از divها باید استایل display:inline-block; باید بهشون بدی.علاوه بر این همه div ها رو داخل تگ <center>قرار بده.:قلب:

[yasharhi]

ممنون دوست عزیز
این چیکار می کنه ؟

display:inline-block;

[masoud_pnu]

خواهش میکنم.این باعث میشه div ها در یه خط مستقیم قرار بگیرن.شما میتونی واسه اون لوگوهای رنگی هم یه تگ <img>تعریف کنی داخل هر div.اون تگ <center>هم برای اینه که وسط قرار بگیرن.چون با توجه به دایرکشن صفحه،اگه تو این تگ نباشن یا صمت راست قرار میگیرن یا چپ.

[دانیال دزفولی]

http://eagle-design.ir/blog/blog/1393/04/27/eagle-design-e1/

[2undercover]

من مثل شکل زیر می خواهم 4 تا دیو رو در وسط صفحه نمایش بدم - با این کد میتونم این کار رو انجام بدم ؟




<div class="container">
<div class="row">


<div class="col-lg-2 col-lg-offset-2">
first div
</div>

<div class="col-lg-2 ">
second div
</div>

<div class="col-lg-2 ">
3 div
</div>

<div class="col-lg-2 ">
4 div
</div>


</div>
</div>





عکس :
http://www.upload7.ir/imgs/2014-07/62617364920043616401_thumb.jpg (http://www.upload7.ir/viewer.php?file=62617364920043616401.jpg)

اگه منظورتون با استفاده از Bootstrap هست بله به همین روش می تونید انجامش بدید.

[mmdsharifi]

سلام
گرید بندی بوت استرپ 12 تایی هستش . خب الان شما می خایید 4 تا بلاک داشته باشید،پس می شه:

12 / 4 = 3

یعنی باید 4 تا 3 تایی داشته باشید...

بنابراین کد تون باید شبیه این بشه:


<div class="container">
<div class="row">
<div class="col-md-3 center-block"> Div 1 </div>
<div class="col-md-3 center-block"> Div 2 </div>
<div class="col-md-3 center-block"> Div 3 </div>
<div class="col-md-3 center-block"> Div 4 </div>
</div>
</div>


برای تست به این لینک برید:http://jsfiddle.net/qejjP/208

[masoud_pnu]

ایشون میخوان بصورت افقی قرار بدن divهارو.نه عمودی.
دوست عزیز بنده دقیقا همین کارو واسه سایتی که دارم روش کارمیکنم انجام دادم.
Www.upvids.vvs.ir.
میتونید ببینید.
توجه داشته باشید اگه از فریم ورکی حالا بوت استرپ یاهرچیز دیگری استفاده میکنید،وحی منزل نیست که حتما از امکانات اون فریم ورک استفاده کنید.اینا فقط ابزار هستن.کما اینکه خیلی از قابلیت های این فریم ورک هارو خودتون میتونید بنویسید.در مسئله ای هم که فرمودید اصلا نیازی به استفاده از کلاس rowنیست.صفت display:inline-block رو بهش بدید هر دیو، انجام میشه کارتون.
موفق باشید.

[e_a_23]

جناب masoud_pnu اون سایتتون خیلی خوب شده. از عکس های خیلی خوبی هم استفاده کردید. درسته که هنوز تکمیل نشده ولی خوشم اومد.
من وقتی اون کد رو دیدم تصورم این بود که دیوها به صورت افقی کنار هم قرار می گیرن ولی وقتی اجراشو دیدم فهمیدم که عمودی قرار می گیرن. چرا؟ مگه نه اینکه توی یه ردیف چهار تا col سه تایی قرار گرفته پس چرا افقی زیر هم قرار گرفتن؟ هر col که 12 تایی نیست! قاط زدم من.

[2undercover]

الان این رو نگاه کنید:

http://codepen.io/2undercover/pen/Hmdsf

احتمالا به این دلیل هست که اندازه مانیتورتون کوچک تر از 1200 پیکسل هست و چون از پیشوند lg استفاده کردید فقط روی اندازه 1200 پیکسل به بالا اثر داره.

[masoud_pnu]

e_a_23 عزیز اصلا از کلاس col استفاده نشده تو این کار.استایل های ساده هست.منتها همگی در یه تگ <center> قرار گرفتن.شما احتمالا float ندادید به المان مورد نظرتون.من در اینجا چون خواستم همگی وسط باشن از <center> استفاده کردم.این کجا کاربرد داره؟در طراحی ریسپانسیو.شما تو همین مثال پایین اندازه پنجره resault رو کوچیک و بزرگ کنید می بینید که کنارهم یا زیرهم قرار میگیرن المان ها.
اینو ببینید :http://jsfiddle.net/9DbCY/