മൂന്ന് തുല്യ നിരകൾ

ഡെസ്‌ക്‌ടോപ്പുകളിൽ ആരംഭിച്ച് വലിയ ഡെസ്‌ക്‌ടോപ്പുകളിലേക്ക് സ്‌കെയിലിംഗ് ചെയ്യുന്ന മൂന്ന് തുല്യ വീതിയുള്ള നിരകൾ നേടുക . മൊബൈൽ ഉപകരണങ്ങളിലും ടാബ്‌ലെറ്റുകളിലും താഴെയും കോളങ്ങൾ സ്വയമേവ അടുക്കും.

.col-md-4
.col-md-4
.col-md-4

മൂന്ന് അസമമായ നിരകൾ

ഡെസ്‌ക്‌ടോപ്പുകളിൽ തുടങ്ങി വിവിധ വീതികളുള്ള വലിയ ഡെസ്‌ക്‌ടോപ്പുകളിലേക്ക് സ്‌കെയിലിംഗ് ചെയ്യുന്ന മൂന്ന് നിരകൾ നേടുക . ഒരു തിരശ്ചീന ബ്ലോക്കിനായി ഗ്രിഡ് നിരകൾ പന്ത്രണ്ട് വരെ ചേർക്കണമെന്ന് ഓർമ്മിക്കുക. അതിലുപരിയായി, വ്യൂപോർട്ട് പരിഗണിക്കാതെ നിരകൾ അടുക്കാൻ തുടങ്ങുന്നു.

.col-md-3
.col-md-6
.col-md-3

രണ്ട് നിരകൾ

ഡെസ്‌ക്‌ടോപ്പുകളിൽ ആരംഭിച്ച് വലിയ ഡെസ്‌ക്‌ടോപ്പുകളിലേക്ക് സ്‌കെയിലിംഗ് ചെയ്യുന്ന രണ്ട് കോളങ്ങൾ നേടുക .

.col-md-8
.col-md-4

പൂർണ്ണ വീതി, ഒറ്റ നിര

പൂർണ്ണ വീതിയുള്ള ഘടകങ്ങൾക്ക് ഗ്രിഡ് ക്ലാസുകളൊന്നും ആവശ്യമില്ല.


രണ്ട് നെസ്റ്റഡ് കോളങ്ങളുള്ള രണ്ട് കോളങ്ങൾ

ഡോക്യുമെന്റേഷൻ അനുസരിച്ച്, നെസ്റ്റിംഗ് എളുപ്പമാണ്-നിലവിലുള്ള കോളത്തിനുള്ളിൽ നിരകളുടെ ഒരു നിര ഇടുക. ഇത് നിങ്ങൾക്ക് ഡെസ്‌ക്‌ടോപ്പുകളിൽ നിന്ന് ആരംഭിച്ച് വലിയ ഡെസ്‌ക്‌ടോപ്പുകളിലേക്ക് സ്‌കെയിലിംഗ് രണ്ട് നിരകൾ നൽകുന്നു , വലിയ കോളത്തിനുള്ളിൽ രണ്ട് (തുല്യ വീതികൾ) കൂടി.

മൊബൈൽ ഉപകരണ വലുപ്പത്തിലും ടാബ്‌ലെറ്റുകളിലും താഴോട്ടും, ഈ നിരകളും അവയുടെ നെസ്റ്റഡ് കോളങ്ങളും അടുക്കും.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

മിക്സഡ്: മൊബൈലും ഡെസ്ക്ടോപ്പും

ബൂട്ട്‌സ്‌ട്രാപ്പ് 3 ഗ്രിഡ് സിസ്റ്റത്തിന് നാല് ടയർ ക്ലാസുകളുണ്ട്: xs (ഫോണുകൾ), sm (ടാബ്‌ലെറ്റുകൾ), md (ഡെസ്‌ക്‌ടോപ്പുകൾ), lg (വലിയ ഡെസ്‌ക്‌ടോപ്പുകൾ). കൂടുതൽ ചലനാത്മകവും വഴക്കമുള്ളതുമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഈ ക്ലാസുകളുടെ ഏതാണ്ട് ഏത് കോമ്പിനേഷനും ഉപയോഗിക്കാം.

ക്ലാസുകളുടെ ഓരോ നിരയും സ്കെയിൽ അപ്പ് ചെയ്യുന്നു, അതായത് xs, sm എന്നിവയ്‌ക്കായി ഒരേ വീതികൾ സജ്ജീകരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ xs മാത്രം വ്യക്തമാക്കിയാൽ മതിയാകും.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

മിക്സഡ്: മൊബൈൽ, ടാബ്ലെറ്റ്, ഡെസ്ക്ടോപ്പ്

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

കോളം വൃത്തിയാക്കൽ

അസമമായ ഉള്ളടക്കം ഉപയോഗിച്ച് വിചിത്രമായ പൊതിയുന്നത് തടയാൻ നിർദ്ദിഷ്ട ബ്രേക്ക്‌പോയിന്റുകളിൽ ഫ്ലോട്ടുകൾ മായ്‌ക്കുക .

.col-xs-6 .col-sm-3
നിങ്ങളുടെ വ്യൂപോർട്ട് വലുപ്പം മാറ്റുക അല്ലെങ്കിൽ ഒരു ഉദാഹരണത്തിനായി നിങ്ങളുടെ ഫോണിൽ അത് പരിശോധിക്കുക.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

ഓഫ്‌സെറ്റ്, പുഷ്, പുൾ റീസെറ്റുകൾ

നിർദ്ദിഷ്‌ട ബ്രേക്ക്‌പോയിന്റുകളിൽ ഓഫ്‌സെറ്റുകൾ, പുഷ്‌കൾ, വലുകൾ എന്നിവ പുനഃസജ്ജമാക്കുക.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0