مشکل در هماهنگی عرض کلاس ها در بوت استرپ

[پیام حیاتی]

سلام عزیزان
این تصویر را مشاهده کنید :

139631

چرا عرض کلاس پایین منو بیشتر از سایر کلاس ها شده است؟!
این کدهای بنده:


<!-- Start Menu -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<?php include('./include/menu.inc.php'); ?>
</div>
</div>
</div>

<!-- End Menu -->



<!-- Start Con-1 -->

<div class="container">
<div class="row" style="width:auto; background-color:#0F0">
<div class="col-xs-12">
Text For Test<br />
Text For Test<br />
Text For Test
</div>
</div>
</div>



<!-- End Con-1 -->



کلاس con-1:


color:#FFF;
z-index:10;


/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3f4c6b+0,3f4c6b+100;Blue+Grey+Flat */
background: #3f4c6b; /* Old browsers */
background: -moz-linear-gradient(top, #3f4c6b 0%, #3f4c6b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #3f4c6b 0%,#3f4c6b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #3f4c6b 0%,#3f4c6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */


منو :


<!-- Start Menu -->
<div class="container">
<div class="menu">
<nav class="navbar navbar-inverse">


<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>


<div class="collapse navbar-collapse pull-right" id="myNavbar" >
<ul class="nav navbar-nav">
<li><a href="#">تماس با من</a></li>
<li><a href="#">درباره من</a></li>
<li><a href="#">گالری تصاویر</a></li>
<li><a href="#">نگاهی به اخبار</a></li>

<li class="active"><a href="#">صفحه اصلی</a></li>
</ul>
</div>
</nav>
</div>
</div>
<!-- End Menu -->

[anvar]

عرض هر دو یکسانه اما مشکل از یه جای دیگه است-

ستون ها در بوت استراپ دارای 15 پیکسل پدینگ در سمت چپ و راست هستند -
حالا اگر تگ div داخل این ستون بذاری بعلت 15 پیکسل پدینگ که در بالا اشاره شد از چپ و راست فاصله می گیرد - اتفاقی که برای منو افتاده
اما اگر به همین ستون رنگ زمینه بدی - محتویاتش مثل منو بالایی میشه اما رنگ زمینش نه - در واقع پدینگ تاثیری بر روی موقعیت رنگ زمینه نمی گذاره و به شکل بالا نمایش داده میشه
راه حل : این قسمت رو (Text For Test) رو در داخل یک تگ div بذار و رنگ دلخواه بهش بده - در واقع این استایل رو باید به همین قسمت بدی (style="background-color:#0F0")-

[پیام حیاتی]

بدین شکل تغییر دادم درست شد:


<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="con_1">
Text For Test<br />
Text For Test<br />
Text For Test
</div>
</div>


<div class="col-xs-6">
<div class="con_1">
Text For Test<br />
Text For Test<br />
Text For Test
</div>
</div>
</div>
</div>



الآن چرا با اینکه در یک ردیف قراردارند فاصله افتاده بین ستون ها؟!

139639

[anvar]

به قاعده عمومی توجه کنید
هر ستون در بوت استراپ دارای 15 پیکسل پدینگ در سمت راست و چپ هست (به استنثاء اولین واخرین ستون یا همان سمت راست ترین و سمت چپ ترین که از فقط از یک طرف پدینگ دارند) این فضای خالی سفید هم از همین پدینگ بوجود مییاد در واقع یه چیز طبیعیه

[پیام حیاتی]

راه حل این مشکل طبیعی چیه؟:لبخندساده:

[anvar]

زمانی که چند تا ستون رو در داخل یک row قرار میدید این فاصله ها بصورت خودکار ایجاد میشه -
بهتره رنگ زمینه رو به والدی که این ستون های 6 تایی در اون قرار دارند نسبت بدید تا رنگ سفید حذف بشه (فاصله ها هنوز هم وجود دارند اما رنگ زمینه سفید ندارند)