قرارگیری نادرست دو ستون درون یک row "بوت استرپ"؟

[پروگرامنویس]

درود دوستان
من بخش هدر قالب رو به دو بخش سرنام تارنما "سمت چپ" و آیکن های برگه ها "سمت راست" بخش بندی کردم
همین جور که می بینید از بوت استرپ دارم بهره میبرم، به هرکدوم از دوبخش در حالت مدیم 6 ستون دادم و میخوام زمانی که کوچتر میشه زیر هم قرار بگیرندولی هنگامی که مرورگر رو کوچیک میکنم دو تا حالت بد پیش میاد یک اینکه دیویژن نگهدارنده آیکن ها با اینکه توی سی اس اس ش بجای height از min-height استفاده کردم اما ارتفاع این دیویژه(boxIcon) هیچ تغییری نمی کنه و دو اینکه تو این حالت دیویژه سمت راست (boxlogo) بجای اینکه دقیقا زیر تگ boxIcon قرار بگیره میاد و هرچی پهنای مرورگر رو کوچیکتر میکنم بیشتر روی اون رو می پوشونه.
برای اینکه بهتر متوجه بشید به پس زمینه تگ ها المنت ها رنگ دادم:
boxHeader: آبی آسمونی
boxLogo : سفید
boxIcon : قرمز
li : نارنجی
و ...

کد html:


<hedear class="row">
<div class="col-md-12 boxHedear">

<div id="boxIcons" class="col-md-6">
<ul class="ulIcon">
<li> <a href="#"><i class="remo-home-2"></i></a>
<ul class="txtIcon">
<li>خانه</li>
</ul>
</li>
<li> <a href="#"><i class="remo-info-circled-1"></i></a>
<ul class="txtIcon">
<li>درباره ما</li>
</ul>
</li>
<li> <a href="#"><i class="remo-phone-squared"></i></a>
<ul class="txtIcon">
<li>تماس با ما</li>
</ul>
</li>
<li> <a href="#"><i class="remo-search-1"></i></a>
<ul class="txtIcon">
<li>سفارش پروژه</li>
</ul>
</li>
<li> <a href="#"><i class="remo-eye-1"></i></a>
<ul class="txtIcon">
<li>فروشگاه</li>
</ul>
</li>
<li> <a href="#"><i class="remo-laptop"></i></a>
<ul class="txtIcon">
<li>نام نویسی</li>
</ul>
</li>
</ul>
</div>
<div id="boxLogo" class="col-md-6">
<h1>آموزش رایانه برای همه</h1>

</div>
</div>


</hedear>


کد سی اس اس خودم:


/*------------ Header Style ------------*/
.boxHedear{
min-height: 150px;
padding-top: 25px;
background-color:skyblue;

}
#boxIcons{
padding-left: 20px;
padding-right: 20px;
min-height: 100px;
background-color: red;
}
#boxIcons ul{
list-style-type: none;
padding-right: 0px;
}
#boxIcons li{
float:right;
position:relative;
text-align:center;
width: 80px;
height: 100%;

background-color: burlywood;
}
#boxIcons i{
font-size: 50px;
color: #09efc5;
}
#boxIcons ul.txtIcon
{
display: none;
position: absolute;
top:62px;
margin-right:0px;
padding:0px;
z-index:999;
}
#boxIcons ul.txtIcon li{
text-align: center;
color: cornflowerblue;
font-size: 12px;
}
#boxIcons li:hover ul.txtIcon {
display: block;
}
#boxLogo{
min-height: 100px;
background-color: #fff;
}






در حالت عادی
133948

حالت باریک
133949

[amirtc]

#boxIcons{
padding-left: 20px;
padding-right: 20px;
min-height: 100px;
background-color: red;
}

min-height:100px;
رو بردارید
یا میتونیدبا استفاده ازmedia queries ها در حالات مختلف ارتفاع رو تعیین کنید !

[پروگرامنویس]

<font color="#333333"><span style="font-family: Consolas">#boxIcons{</span></font>
<font color="#333333"><span style="font-family: Consolas"> padding-left: 20px;</span></font>
<font color="#333333"><span style="font-family: Consolas"> padding-right: 20px;</span></font>
<font color="#333333"><span style="font-family: Consolas"> min-height: 100px;</span></font>
<font color="#333333"><span style="font-family: Consolas"> background-color: red;</span></font>
<font color="#333333"><span style="font-family: Consolas">}

</span></font>


منظورتون از کدهای بالا چی بود؟ این کدها برای چی هستند؟
و اینکه راستش من از بوت استرپ بیشتر واسه همین خاصیت واکنشگرا بودنش استفاده میبکنم که دیگه از مدیا کوئری استفاده نکنم!

[amirtc]

پیشنهاد میشه قبل از کار با بوتسرپ اصول رسپانسیو رو یاد بگیرید.
همچنین در سایت بوتسرپ مستنداتشرو مطالعه کنید.

[پروگرامنویس]

میشه یه لینک معرفی کنید برای یادگیری اصول ریسپانسیو؟

[amirali0079]

http://www.w3schools.com/css/css_rwd_intro.asp

[پروگرامنویس]

بسیار سپاس
ولی واقعا راهی برای برطرف کردن این مشکل خاص من بجزء استفاده از مدیا کوئری نیست!؟
بابا من یه row دیگه تو همین صفحه نوشتم که مثه همین روی به دو قسمت 6 تایی تقسیم شده وقتی هم که مرورگر رو کوچیک میکنم بدون هیچ مشکلی هر دو ستون زیرهم قرار میگیرند! بنظرم مشکل اینکه ستون سمت چپ میاد روی ستون سمت راست از ul هست که استفاده کردم! هرچی هست بخاطر اونه گمونم

[mohammad425]

دموی آنلاین قرار بدین کامل برسی کنم

[پروگرامنویس]

دموی آنلاین قرار بدین کامل برسی کنم
سپاس اما چجوری باید دموی آنلاین قرار بدم؟! :خجالت:

[mohammad425]

یا قالبوتون رو بفرستین و یا روی یه هاست آپلود کنید و لینکشو بزارید

[tooka123]

سلام اصول سایت ریسپانسیو اینه که وقتی مرورگر کوچک شد منو هم یا باید به شکل select نشون داده بشه یا به جای منو یک آیکن نشون داده بشه که با کلیک بر روی اون منو نمایش داده بشه

اگر میخواهید به همین روش باشه به ul منو display:table بدید درست میشه

[پروگرامنویس]

یا قالبوتون رو بفرستین و یا روی یه هاست آپلود کنید و لینکشو بزارید

بفرمایید
اینم پوشه سایت
فقط یه چیزی اونم اینکه من سی اس اس بوتسترپ چپ چین رو به وسیله تارنما زیر راست چین کردم! و بعد نسخه راست چین شده رو به برگه ایندکس پیوند دادم

https://cssjanus.github.io/

ضمیمه:
http://uplod.ir/9sbav2a2owhn/myWeb.rar.htm

[mohammad425]

مشکل شما اینه که بوت استرپ رو کامل یاد نگرفتین و از کد ها درست استفاده نکردین
اول از همه که نباید به تگ header کلاس row بدین و فقط باید به div این کلاس اختصاص داده بشه
دوم این که در مورد کلاس xs در بوت استرپ تحقیق کنید.
سوما اینکه ul شما جمع شده و باید float اون رو هم right بکنید.
اینم کدهاتون: