אתר רספונסיבי עם שוליים

אוסנתס · 23/11/17

אתר רספונסיבי עם שוליים

שלום,
רוצה להגדיר אתר רספונסיבי עם שוליים. כאשר מקטינים את הדף אני רוצה רוצה שיראו רק את החלק המרכזי ולא את השוליים.
כתבתי תוך שימוש ב- bootsrap אבל כאשר מקטינים הוא עושה מהשוליים חלק מהשורות. איך ניתן להעלים אותם בהקטנה?
תודה לעונים.

קוד:

<div class="row">
  <div class="col-sm-2" style="background-color:red">
      <div style="background-color:gray">stam</div>
      <div style="background-color:black">stam</div>
      
  </div>
  <div class="col-sm-8" style="background-color:green">.col-sm-8</div>
  <div class="col-sm-2" style="background-color:blue">.col-sm-2</div>
</div>

עוץליגוץלי · 23/11/17

בלי bootstrap מותר?

משהו קצרצר, מקווה שאין בו באגים. כוונתי את רוחב העמודה המרכזית ל-500px, תקטיני את המסך כדי לראות את השינויים.

קוד:

<!DOCTYPE html>
<html>  
	<head id='head'>
		<meta charset='utf-8'>
		<title>stam data</title>
		<style type='text/css'>
            div.data { background-color:white; display:inline-block; width:100%; max-width:500px; }
            body { background-color:yellow; text-align:center; }
		</style>
     </head>
     <body>
		 <div class='data'>
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
            Some words for idiotic data 
		 </div>
		 
     </body>
</html>

אוסנתס · 24/11/17

אני לא יודעת אם אפשר בלי bootsrap

בלי לרשום הרבה יותר קוד. אבל הכוונה שיש לי 3 מקטעים. שוליים ימניים בצבע אחד שם אני שמה אלמנטים ולא רקע. מקטע מרכזי שם זה החלק המרכזי של האתר שחשוב שיראה כאשר המסך יותר קטן. ועוד מקטע ימני עם אלמנטים אחרים. שלא ישמש רק בתור קרע חלק.
בנתיים האפשרות היחידה שמצאתי היא לותר על השורה הראשונה בקוד שכתבתי. ואז החלק המרכז יופיע ראשון, ואחריו השוליים הימניים למי שירצה לדפדף יותר למטה.
הכוונה שהשוליים יכילו גם תוכן ולא ישמשו רק בתור רקע עם צבע.

עוץליגוץלי · 24/11/17

תעלי ציור של "כך אני רוצה", ונראה.

s a m p i · 24/11/17

תלוי בגרסת ה boostrap שאת משתמשת

אם גרסה 3:

קוד:

<div class="row">
    <div class="col-sm-2 hidden-xs" style="background-color:red">
    .col-sm-2
    </div>
    <div class="col-sm-12 col-md-8" style="background-color:green">.col-sm-8</div>
    <div class="col-sm-2 hidden-xs" style="background-color:yellow">.col-sm-2</div>
</div>

כלומר ממסך קטן ומעלה יהיו שלוש עמודות ועבור מסכים קטנים רק העמודה המרכזית תראה והשתיים בצדדים "ייעלמו".

s a m p i · 24/11/17

עבור גרסה 4 יש קלאסים אחרים:

קוד:

<div class="row">
            <div class="col-sm-2 hidden-xs-down" style="background-color:red">
                .col-sm-2
            </div>
            <div class="col-sm-12 col-md-8" style="background-color:green">.col-sm-8</div>
            <div class="col-sm-2 hidden-xs-down" style="background-color:yellow">.col-sm-2</div>
        </div>

אוסנתס · 26/11/17

תודה, זה עובד עם hidden

אתר רספונסיבי עם שוליים

אוסנתס

New member

עוץליגוץלי

New member

אוסנתס

New member

עוץליגוץלי

New member

s a m p i

New member

s a m p i

New member

אוסנתס

New member