1154

ට්විටර් බූට්ස්ට්‍රැප් 3 හි කන්ටේනරය තුළ (තීරු 12) එක් තීරු ප්‍රමාණයේ බෙදීමක් කේන්ද්‍රගත කරන්නේ කෙසේද ?

.centered {
  background-color: red;
}

<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

ස්නිපටය පුළුල් කරන්න

divපංතියක් සහිත .centeredකන්ටේනරය තුළ කේන්ද්‍රගත වීමට මට අවශ්‍යයි . බහුවිධ divs තිබේ නම් මට පේළියක් භාවිතා කළ හැකිය , නමුත් දැනට මට අවශ්‍ය divවන්නේ බහාලුම තුළ (තීරු 12) කේන්ද්‍රගතව ඇති එක් තීරුවක ප්‍රමාණය සමඟ ය.

ඉහත ප්‍රවේශය ප්‍රමාණවත් නොවන බව මට විශ්වාස නැත div. මට පිටතින් නිදහස් අවකාශයක් අවශ්‍ය නොවන අතර සමානුපාතිකව හැකිලීමේ divඅන්තර්ගතය div. ඒකාකාරව බෙදා හැරීම සඳහා කොට් div ාශයෙන් පිටත හිස් ඉඩක් මට අවශ්‍යයි (බහාලුම් පළල එක් තීරුවකට සමාන වන තෙක් හැකිලෙන්න).

— bsr
source

1971

<div>Bootstrap 3 හි තීරුවක් කේන්ද්‍රගත කිරීම සඳහා ප්‍රවේශයන් දෙකක් තිබේ :

ප්‍රවේශය 1 (ඕෆ්සෙට්):

පළමු ප්‍රවේශය මඟින් බූට්ස්ට්‍රැප්ගේම ඕෆ්සෙට් පන්ති භාවිතා කරයි, එබැවින් එයට සලකුණු වෙනස් කිරීමක් අවශ්‍ය නොවන අතර අතිරේක CSS අවශ්‍ය නොවේ. ප්රධාන දෙය නම් පේළියේ ඉතිරි ප්රමාණයෙන් අඩකට සමාන ඕෆ්සෙට් එකක් සැකසීමයි . උදාහරණයක් ලෙස, 2 ප්‍රමාණයේ තීරුවක් 5 ක ඕෆ්සෙට් එකක් එකතු කිරීමෙන් කේන්ද්‍රගත වනු ඇත, එනම්(12-2)/2 .

සලකුණු කිරීමේදී මෙය පෙනෙන්නේ:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

දැන්, මෙම ක්රමය සඳහා පැහැදිලි අඩුපාඩුවක් තිබේ. එය පමණක් පවා තීරුව ප්රමාණ සඳහා ක්රියා නිසා පමණක් .col-X-2, .col-X-4, col-X-6, col-X-8, සහ col-X-10සහාය දක්වයි.

ප්‍රවේශය 2 (පැරණි `margin:auto`)

ඔප්පු කරන ලද තාක්ෂණය භාවිතා කිරීමෙන් ඔබට ඕනෑම තීරු ප්‍රමාණයක් කේන්ද්‍රගත කළ හැකිය margin: 0 auto;. බූට්ස්ට්‍රැප් හි ජාල පද්ධතිය මඟින් එකතු කරන පාවෙන දේ ගැන ඔබ සැලකිලිමත් විය යුතුය. පහත සඳහන් පරිදි අභිරුචි CSS පන්තියක් අර්ථ දැක්වීමට මම නිර්දේශ කරමි:

.col-centered{
    float: none;
    margin: 0 auto;
}

දැන් ඔබට එය ඕනෑම තිර ප්‍රමාණයකට ඕනෑම තීරු ප්‍රමාණයකට එක් කළ හැකි අතර එය බූට්ස්ට්‍රැප් හි ප්‍රතිචාරාත්මක සැකැස්ම සමඟ බාධාවකින් තොරව ක්‍රියා කරයි:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

සටහන: ක්‍රම දෙකම සමඟින් ඔබට .rowමූලද්‍රව්‍යය මඟ හැරිය හැකි අතර තීරුව කේන්ද්‍රගතව තිබිය හැක .container, නමුත් බහාලුම් පන්තියේ පෑඩ් කිරීම නිසා සත්‍ය තීරු ප්‍රමාණයෙහි අවම වෙනසක් ඔබට පෙනෙනු ඇත.

යාවත්කාලීන කිරීම:

V3.0.1 බූට්ස්ට්‍රැප් හි ඉදිකරන ලද පංතියක් center-blockඇති margin: 0 autoනමුත් එය අස්ථානගත float:noneවී ඇති හෙයින්, එය ග්‍රිඩ් පද්ධතිය සමඟ වැඩ කිරීමට ඔබේ CSS වෙත එකතු කළ හැකිය.

— koala_dev
source

1

මම හිතන්නේ පාවෙන දෙයක් නැත: මධ්‍ය-වාරණ රීතියේ කිසිවක් නොමැති නිසා පාවෙන නිශ්කාෂණය සඳහා මූලද්‍රව්‍යවලට එකතු කළ හැකි පැහැදිලි ස්වාධීන රීතියක් ඇත.

— ඩියාගෝ ප්‍රනාන්දු මුරිලෝ වැලෙන්සි

7

IeDiegoFernandoMurilloValenci .clearfixමෙම නඩුවේදී ක්‍රියා නොකරන්නේ එය මූලද්‍රව්‍යවල පාවෙන දේපල ඉවත් නොකරන නිසා (එය කේන්ද්‍රීය භාවිතයට අවශ්‍ය වේ margin: 0 auto), එමඟින් කන්ටේනරයක් ඇතුළත ඕනෑම පාවෙන මූලද්‍රව්‍යයක්

— ඔතා තබයි

4

තීරුවක මෙය භාවිතා කළ නොහැක, මන්ද නැතfloat:none;

— එයාර්ටොනික්ස්

2

ඔබට තවත් පේළියක එක් තීරුවක කේන්ද්‍රගත වීමට අවශ්‍ය නම්, මෙම පිළිතුර stackoverflow.com/questions/28683329/…

— කොනෝර්

3

ඕෆ්සෙට් සඳහා වන වාක්‍ය ඛණ්ඩය Bootstrap4 හි වෙනස් විය (නවතම අනුවාදය අනුව). උදාහරණයක් ලෙස මෙම ප්‍රතිචාරය භාවිතා කිරීම: පන්තියේ col-md-offset-5 දැන් ඕෆ්සෙට්- md-5 විය යුතුය.

— lgants

297

තීරු කේන්ද්‍රගත කිරීමේ වඩාත් කැමති ක්‍රමය වන්නේ “ඕෆ්සෙට්” භාවිතා කිරීමයි (එනම්:col-md-offset-3 )

Bootstrap 3.x කේන්ද්‍රගත උදාහරණ

සඳහා අංග කේන්ද්ර , යම් කෙනෙක් center-block සහකාරියක් පන්ති .

ඔබ ද භාවිතා කළ හැකිය text-centerකිරීමට මධ්යස්ථානය පෙළ (සහ පේළිගත අංග).

නිරූපණය : http://bootply.com/91632

සංස්කරණය කරන්න - අදහස් දැක්වීම්වල සඳහන් පරිදි,center-blockතීරු අන්තර්ගතය සහdisplay:blockමූලද්‍රව්‍යයන්මත ක්‍රියා කරයි, නමුත්col-*බූට්ස්ට්‍රැප් භාවිතා කරන නිසාතීරුවේම (බෙදීම්) ක්‍රියා නොකරනුfloatඇත.

යාවත්කාලීන 2018

දැන් Bootstrap 4 සමඟ , කේන්ද්‍රගත කිරීමේ ක්‍රම වෙනස් වී ඇත ..

text-centerdisplay:inlineමූලද්රව්ය සඳහා තවමත් භාවිතා වේ
mx-autocenter-blockමධ්‍ය display:blockමූලද්‍රව්‍ය වෙනුවට ආදේශ කරයි
offset-* හෝ mx-auto ජාලක තීරු කේන්ද්‍රගත කිරීමට භාවිතා කළ හැකිය

mx-auto(මෝටර් රථ x අක්ෂය ආන්තිකයන්) මධ්යස්ථානය මඟින් display:blockහෝ display:flexඇති මූලද්රව්ය අර්ථ පළල , ( %, vw, px, ආදිය ..). ජාලක තීරුවල පෙරනිමියෙන් ෆ්ලෙක්ස්බොක්ස් භාවිතා වේ , එබැවින් විවිධ නම්යශීලී කේන්ද්‍රගත කිරීමේ ක්‍රම ද ඇත.

Demo Bootstrap 4 තිරස් කේන්ද්‍රගත කිරීම

BS4 හි සිරස් කේන්ද්‍රගත කිරීම සඳහා https://stackoverflow.com/a/41464397/171456 බලන්න

— සිම්
source

31

අවාසනාවකට මෙම සහායක පන්තිය පාවෙන දේපල ගැන සැලකිලිමත් නොවන බැවින් තීරු පද්ධතිය සමඟ ක්‍රියා නොකරයි. බලන්න මේ Demo සඳහා උදාහරණ වේ.

— koala_dev

13

ඒ සඳහා අවශ්‍ය වන්නේ මධ්‍ය-වාරණයක් පමණි {පාවෙන: කිසිවක් නැත; }, එය ක්‍රියාත්මක වේ. bootply.com/122268

— Matias Vad

5

OP ගැන විශ්වාස නැත, නමුත් මම මෙහි text-centerවිස්තරය සොයමින් සිටියෙමි - වෙනත් පිළිතුරු කිසිවක් සපයා නැත. මේ කෙනාට මගේ ඡන්දය ලැබෙනවා.

— domoarigato

1

තීරුවක මෙය භාවිතා කළ නොහැක, මන්ද නැතfloat:none;

— එයාර්ටොනික්ස්

98

දැන් Bootstrap 3.1.1 සමඟ වැඩ කරන .center-blockඅතර මෙම සහායක පන්තිය තීරු පද්ධතිය සමඟ ක්‍රියා කරයි.

බූට්ස්ට්‍රැප් 3 උපකාරක පන්ති මධ්‍යස්ථානය .

කරුණාකර මෙම jsfiddle DEMO පරීක්ෂා කරන්න :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

උපකාරක පන්ති මධ්‍යස්ථානය

col-center-blockඋපකාරක පන්තිය භාවිතා කරමින් පේළි තීරු මධ්‍යස්ථානය .

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

— යවන්නා
source

float:noneඩිව් සෙන්ටර් බ්ලොක් එකට අදාළ style="width : ?px"ශෛලිය ඇති බව තහවුරු කර ගැනීමෙන් මම මෙම කාර්යය එකතු නොකරමි . උදාහරණයක් ලෙස රූප පළල. 3.2.2

— Piotr Kula

ආන්තිකය: 0 ස්වයංක්‍රීය; - ප්‍රමාණවත් තරම් ආන්තික-වම් + ආන්තික-දකුණ

— mmike

57

ඔබගේ අභිරුචි CSS ගොනුවට පහත සඳහන් දෑ එක් කරන්න. Bootstrap CSS ගොනු කෙලින්ම සංස්කරණය කිරීම නිර්දේශ නොකරන අතර CDN භාවිතා කිරීමේ හැකියාව අවලංගු කරයි .

.center-block {
    float: none !important
}

මන්ද?

බූට්ස්ට්‍රැප් CSS (අනුවාදය 3.7 සහ පහළ) ආන්තිකය භාවිතා කරයි : 0 ස්වයංක්‍රීය;, නමුත් එය ප්‍රමාණයේ බහාලුම්වල පාවෙන දේපල මගින් අභිබවා යයි.

පීඑස් :

ඔබ මෙම පන්තිය එකතු කළ පසු, නිවැරදි පිළිවෙලට පන්ති සැකසීමට අමතක නොකරන්න.

<div class="col-md-6 center-block">Example</div>

— Sagive SEO
source

1

මම බූට්ස්ට්‍රැප් භාවිතා 3.3.7කරන අතර මට වැඩ කරන එකම ක්‍රමය මෙයයි!

— illagrenan

1

මෙය ක්‍රියාත්මක වේ. නමුත් හිතන්නේ නැහැ !importantඅවශ්ය

— Gianfranco පී

1

IanGianfrancoP. P. ඔබේ අයිතිය, නමුත් ... එය පැටවීමේ අනුපිළිවෙල මත රඳා පවතින අතර මට අවශ්‍ය වූයේ මෝඩ ක්‍රමයක් නොවේ.

— Sagive SEO

39

බූට්ස්ට්‍රැප් 3 දැන් මේ සඳහා සාදන ලද පන්තියක් ඇත.center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ඔබ තවමත් 2.X භාවිතා කරන්නේ නම් මෙය ඔබේ CSS වෙත එක් කරන්න.

— ෂ්මාල්සි
source

මෙය බොහෝ විට ඔබට අපේක්ෂිත බලපෑම පහසුම වනු ඇත. ඔබ වඩාත් මොඩියුලර් ප්‍රවේශයක් සඳහා යන්නේ නම්. කේන්ද්‍රීය පන්තියට පළල විසි කරන්න හෝ දෙවන පන්තියක් එක් කරන්න

— මැට් ලැම්බර්ට්

2

පාවෙන එකතු කිරීම: කිසිවක් නැත; .centered වෙත පන්තිය බහාලුම් තුළට ගෙන යාමට ඔබට ඉඩ සලසයි. කේතය පිරිසිදුව තබා ගනී

— ඇඩම් පැටසන්

7

තීරුවක මෙය භාවිතා කළ නොහැක, මන්ද නැතfloat:none;

— එයාර්ටොනික්ස්

38

මැද තීරු සඳහා මගේ ප්‍රවේශය වන්නේ තීරු display: inline-blockසඳහා සහ text-align: centerබහාලුම් මාපිය සඳහා භාවිතා කිරීමයි .

ඔබ CSS පන්තිය 'කේන්ද්‍රගත' කිරීමට එකතු කළ rowයුතුය.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

— ස්ටෙෆි
source

2

100% ක්ම වැඩ කළ එකම පිළිතුර මෙයයි - අනෙක් ඒවා ක්‍රියාත්මක විය, නමුත් බූට්ස්ට්‍රැප් එහි ජංගම දර්ශනයට මාරු වූ විට නොවේ (අයිතම වම් පැත්තට ගෙන යන ලදි).

— ලෙවි ෆුලර්

මටත් වැඩ කළ එකම එක මෙයයි .සෙන්ටර්-බ්ලොක් එක තීරුවකට පමණක් ක්‍රියා කරන අතර සියලු තීරු ගණන කොපමණ දැයි ස්වාධීනව කේන්ද්‍රගත කළ යුතුය.

— cjohansson

මටත් වැඩ කළ විසඳුම පමණයි. අනෙක් ඒවා ක්‍රියාත්මක වූයේ බ්‍රව්සරය කවුළුවක් වූ විට පමණි (පූර්ණ තිරය නොවේ).

— kiwicomb123

26

බූට්ස්ට්‍රැප් අනුවාදය 3 හි .text-center පන්තියක් ඇත.

මෙම පන්තිය එක් කරන්න:

text-center

එය හුදෙක් මෙම විලාසය පටවනු ඇත:

.text-center {
    text-align: center;
}

උදාහරණයක්:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>

— රස්ටි ඉන්ගල්ස්
source

මෙම පන්තිය එකතු කරන්නේ කොතැනින්ද යන්න පැහැදිලි කරන්න?

— aksu

හායි @aksu, ඔබට .css කිසිවක් එකතු කිරීමට අවශ්‍ය නැත. ලබා දී ඇති උදාහරණය දෙස බලන්න.

— ජොෂ් යේට්ස් 1980

21

බුට්ස්ට්රැප් v4 සමග, මෙම එකතු කිරීම මඟින් පමණක් ඉටු කළ හැකි .justify-content-centerවෙත.row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

— joknawe
source

15

මෙය ක්‍රියාත්මක වේ. බොහෝ විට අශෝභන ක්‍රමයක් විය හැකි නමුත් එය මනාව ක්‍රියාත්මක වේ. ප්‍රතිචාරාත්මක (Y) සඳහා එය පරීක්ෂා කරන ලදී.

.centered {
    background-color: teal;
    text-align: center;
}

ඩෙස්ක්ටොප් එක

ප්‍රතිචාරාත්මක

— අලි ගජානි
source

ක්‍රියාත්මක වන්නේ මූලද්‍රව්‍යයට ඩිප්ලේ පේළියක් ඇති නිසා පමණි. ක imgවාරණ ලෙස සකසා ගත හැක.

— ProfileTwist

සමහර විට ඔබේ හුදකලා පරීක්ෂණ අවස්ථාවකදී. මම .centered img { display: inline; }ඔබේ පිළිතුරට එකතු කර ඒ වෙනුවට ඉහළ ඡන්දයක් ලබා ගැනීම වටී.

— ProfileTwist

කිසිම ප්රශ්නයක් නැ. මට විශ්වාසයි OP ඔහුගේ / ඇයගේ පිළිතුර සොයා ගනීවි :)

— අලි ගජානි

බූට්ස්ට්‍රැප් 3 හි, .text-center පන්තිය මා ඉහත ඉගෙන ගත් පරිදි දේශීයව එකම දේ කරයි.

— domoarigato

7

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

— වලි
source

6

තීරුව කේන්ද්‍රගත කිරීම සඳහා අප පහත කේතය භාවිතා කළ යුතුය. cols යනු ආන්තික ඔටෝට අමතරව පාවෙන මූලද්‍රව්‍යයන් වේ. අපි එය කිසිවක් පාවීමට සූදානම් කරමු,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

ඉහත col-lg-1 කේන්ද්‍රගත පන්තිය සමඟ කේන්ද්‍රගත කිරීම සඳහා, අපි මෙසේ ලියන්නෙමු.

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Div තුළ අන්තර්ගතය කේන්ද්‍රගත කිරීම සඳහා, භාවිතා කරන්න text-align:center,

.centered {
    text-align: center;
}

ඔබට එය කේන්ද්‍රගත කිරීමට අවශ්‍ය නම් ඩෙස්ක්ටොප් එකේ සහ විශාල තිරයේ මිස ජංගම දුරකථනයෙන් නොවේ නම් පහත සඳහන් මාධ්‍ය විමසුම භාවිතා කරන්න.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

ජංගම අනුවාදයේ පමණක් div කේන්ද්‍රගත කිරීමට, පහත කේතය භාවිතා කරන්න.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

— අමීර් ෂාසාඩ්
source

6

අන්තර්ගතය පෙන්වන එක් තීරුවක් col-xs-12 (ජංගම-පළමු ;-) ලෙස සකසා කන්ටේනරය වින්‍යාස කර ඔබේ කේන්ද්‍රීය අන්තර්ගතය කොතරම් පුළුල් විය යුතුද යන්න පාලනය කිරීමට පමණි, එබැවින්:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

ස්නිපටය පුළුල් කරන්න

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

ස්නිපටය පුළුල් කරන්න

නිරූපණයක් සඳහා, http://codepen.io/Kebten/pen/gpRNMe :-) බලන්න

— කීරාන් රයන්
source

6

ඕෆ්සෙට් කිරීමේ තවත් ප්‍රවේශයක් වන්නේ හිස් පේළි දෙකක් තිබීමයි, උදාහරණයක් ලෙස:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

— ලෙරෝයි
source

1

වැඩකට නැති බෙදීම් 2 ක්, col-md-offset- * වඩා හොඳය

— ymakux

1

මම එකඟයි. මම එම ක්‍රමය භාවිතා කළේ එය හොඳින් ක්‍රියා කර පරීක්ෂා කර ඇති බැවිනි.

— LeRoy

6

ඔබට text-centerපේළිය සඳහා භාවිතා කළ හැකි අතර අභ්‍යන්තර බෙදීම් ඇති බව සහතික කර ගත හැකිය display:inline-block(නැතfloat ).

පරිදි:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

සහ CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

ෆෙඩල්: http://jsfiddle.net/DTcHh/3177/

— අලිරේසා ෆටාහි
source

6

බූට්ස්ට්‍රැප් 4 සමඟ ඔබට මෙහිjustify-content-md-center සඳහන් කර ඇති ආකාරයට උත්සාහ කළ හැකිය

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

— හුසේන් නරිමානි රැඩ්
source

1

D ඇඩම් එරික්සන් ප්‍රශ්නය විශේෂයෙන් ඇසුවේ බූට්ස්ට්‍රැප් 3 විසඳුමක් සඳහා ය. මෙම පිළිතුර බොහෝ විට BS4 හි යා යුතු මාර්ගය බැවින්, 2019 දී සමහර මෘදුකාංග තවමත් bootstrap 3 භාවිතා කරයි.

— A1rPun

5

මෙය බොහෝ විට හොඳම පිළිතුර නොවේ, නමුත් මේ සඳහා තවත් නිර්මාණාත්මක විසඳුමක් තිබේ. Koala_dev විසින් පෙන්වා දී ඇති පරිදි, තීරු ඕෆ්සෙට් කිරීම ක්‍රියාත්මක වන්නේ තීරු ප්‍රමාණ සඳහා පමණි. කෙසේ වෙතත්, පේළි කැදැල්ල කිරීමෙන් ඔබට අසමාන තීරු කේන්ද්‍රගත කර ගත හැකිය.

12 ක ජාලයක් තුළ 1 තීරුවක් කේන්ද්‍රගත කිරීමට ඔබට අවශ්‍ය මුල් ප්‍රශ්නයට ඇලී සිටීමට.

5 ක ඕෆ්සෙට් කිරීමෙන් 2 තීරුවක් කේන්ද්‍රගත කරන්න
කැදැලි පේළියක් සාදන්න, එවිට ඔබේ තීරු 2 තුළ නව තීරු 12 ක් ලැබෙනු ඇත.
ඔබට 1 තීරුව කේන්ද්‍රගත කිරීමට අවශ්‍ය වන අතර 1 යනු 2 න් අඩක් (අපි 1 වන පියවර කේන්ද්‍රගත කර ඇති දේ) බැවින්, දැන් ඔබට ඔබේ කැදැලි පේළියේ 6 තීරුවක් කේන්ද්‍රගත කළ යුතුය, එය 3 ඕෆ්සෙට් කිරීමෙන් පහසුවෙන් කළ හැකිය.

උදාහරණයක් වශයෙන්:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

මෙම ප්‍රහේලිකාව බලන්න, ප්‍රති the ලය බැලීමට ඔබට ප්‍රතිදාන කවුළුවේ ප්‍රමාණය වැඩි කළ යුතු බව කරුණාවෙන් සලකන්න, එසේ නොමැතිනම් තීරු එතෙනු ඇත.

— reinder
source

5

මෙය මගේ කේතය නොවේ, නමුත් එය පරිපූර්ණව ක්‍රියා කරයි (බූට්ස්ට්‍රැප් 3 හි පරීක්ෂා කර ඇත) සහ මට කොල්-ඕෆ්සෙට් සමඟ පටලවා ගත යුතු නැත.

නිරූපණය:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>

ස්නිපටය පුළුල් කරන්න

— බිනාර් වෙබ්
source

4

වගු පිරිසැලසුම් යාන්ත්‍රණය භාවිතා කිරීමෙන් අපට මෙය සාක්ෂාත් කරගත හැකිය:

යාන්ත්‍රණය:

සියලුම තීරු එක බෙදීමකින් ඔතා.
ස්ථාවර පිරිසැලසුමක් සහිත වගුවක් ලෙස එම බෙදීම කරන්න.
සෑම තීරුවක්ම මේස කොටුවක් ලෙස සාදන්න.
අන්තර්ගතයේ පිහිටීම පාලනය කිරීම සඳහා සිරස්-පෙළගැස්වීමේ දේපල භාවිතා කරන්න.

නියැදි නිරූපණය මෙහි ඇත

— මොහාන් ඩෙරේ
source

4

ඔබගේ .row හෝ .col තුළ පහත දැක්වෙන ස්නිපටය එකතු කරන්න. මෙය Bootstrap 4 * සඳහා වේ.

d-flex justify-content-center

— තෝමස් චිර්වා
source

3

Koala_dev ඔහුගේ 1 වන ප්‍රවේශය සඳහා භාවිතා කළ පරිදි, මම භාවිතා කරන්නේ සීමිත භාවිතයක් ඇති මධ්‍ය-වාරණ හෝ ආන්තිකයන් වෙනුවට ඕෆ්සෙට් ක්‍රමයටයි, නමුත් ඔහු සඳහන් කළ පරිදි:

දැන්, මෙම ක්‍රමයට පැහැදිලි අඩුපාඩුවක් තිබේ, එය ක්‍රියාත්මක වන්නේ තීරු ප්‍රමාණ සඳහා පමණි, එබැවින් .col-X-2, .col-X-4, col-X-6, col-X-8 සහ col-X- 10 ක් සහාය දක්වයි.

අමුතු තීරු සඳහා පහත දැක්වෙන ප්‍රවේශය භාවිතා කර මෙය විසඳා ගත හැකිය.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

— අභිනව් සිං
source

3

ඔබේ බූට්ස්ට්‍රැප් වෙත ඉතා නම්‍යශීලී විසඳුම් නම්ය පෙට්ටියක් භාවිතා කළ හැකිය.

justify-content: center;

ඔබේ තීරුව කේන්ද්‍රගත කළ හැකිය.

නම්‍යතාවය පරීක්ෂා කරන්න .

— රළු
source

3

Bootstrap 4 විසඳුම:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

— ජෑන්බ්‍රස්
source

2

මට කිසි විටෙකත් එකක් .col-තුළ පමණක් කේන්ද්‍රගත කිරීමේ අවශ්‍යතාවයක් නොමැති නිසා .row, මම පහත දැක්වෙන පන්තිය .rowමගේ ඉලක්ක තීරු එතීම මත තැබුවෙමි .

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

උදාහරණයක්

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

— වෝල්ටර් රෝමන්
source

2

ඔබේ ජාලකය පිරවීම සඳහා ඔබට නිශ්චිත අංකයක් නොමැති විට තිරයේ ඇති තීරු මූලද්‍රව්‍ය කේන්ද්‍රගත කිරීමට බලාපොරොත්තු වන අය සඳහා, පන්ති නම් නැවත ලබා දීම සඳහා මම ජාවාස්ක්‍රිප්ට් කුඩා කොටසක් ලියා ඇත:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

ඔබට මූලද්‍රව්‍ය 5 ක් ඇති අතර mdඔබට තිරයක පේළියකට 3 ක් අවශ්‍ය නම් , ඔබ මෙය කරන්නේ:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

මතක තබා ගන්න, දෙවන තර්කය 12 න් බෙදිය යුතුය.

— jsgoupil
source

2

බූට්ස්ට්‍රැප් පේළියක එක් තීරුවකට වඩා කේන්ද්‍රගත කිරීම සඳහා - සහ තීරු ගණන අමුතු නම්, cssඑම පේළියේ ඇති සියලුම තීරුවලට මෙම පන්තිය එක් කරන්න :

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

එබැවින් ඔබේ HTML හි ඔබට එවැනි දෙයක් තිබේ:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

— රූටෝ කොලින්ස්
source

2

මේක උත්සාහ කරන්න

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

ඔබට වෙනත් colමෙන්ම වෙනත් දේ භාවිතා කළ හැකිය col-md-2.

— ච උමර් ජමිල්
source

2

පංතිය භාවිතා කිරීමට මම යෝජනා කරමි text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

— ඩැඩිච් සෞරව්
source

2

මෙම කේතය උත්සාහ කරන්න.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

මෙන්න මම col-lg-1 භාවිතා කර ඇති අතර විශාල උපාංගවල div නිසි ලෙස කේන්ද්‍රගත කිරීම සඳහා ඕෆ්සෙට් 10 විය යුතුය. මධ්‍යම සිට විශාල උපාංග මත කේන්ද්‍රගත වීමට ඔබට එය අවශ්‍ය නම් lg එක md ලෙස වෙනස් කරන්න.

— බන්ගාෂ්
source

1

ඔබ මෙය ඔබේ පේළිය මත තැබුවහොත්, ඇතුළත ඇති සියලුම තීරු කේන්ද්‍රගත වනු ඇත:

.row-centered {
    display: flex;
    justify-content: space-between;
}

— එරන් ෂබි
source

මූලද්‍රව්‍යය ප්‍රතිචාර නොදක්වන ලදි.

— gfivehost

1

වඩාත් නිවැරදිව කිවහොත් බූට්ස්ට්‍රැප් හි ජාල පද්ධතියට තීරු 12 ක් අඩංගු වන අතර ඕනෑම අන්තර්ගතයක් කේන්ද්‍රගත කිරීම සඳහා අපි කියමු, උදාහරණයක් ලෙස, අන්තර්ගතය එක් තීරුවක් ගනී. යමෙකුට බූට්ස්ට්‍රැප් ජාලකයේ තීරු දෙකක් වාඩිවී අන්තර්ගතය වාඩිලා ගත් තීරු දෙකෙන් අඩක් තැබිය යුතුය.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' යනු ග්‍රිඩ් පද්ධතියට අන්තර්ගතය තැබිය යුත්තේ කොතැනින්දැයි කියාය.

'col-xs-2' යනු ජාලක පද්ධතියට කියනුයේ ඉතිරිව ඇති තීරු ගණන කොපමණ ප්‍රමාණයක් අන්තර්ගත විය යුතුද යන්නයි.

'කේන්ද්‍රගත' යනු අන්තර්ගතය කේන්ද්‍රගත කරන නිර්වචනය කරන ලද පන්තියකි.

බූට්ස්ට්‍රැප් හි ජාල පද්ධතියේ මෙම උදාහරණය පෙනෙන්නේ කෙසේද යන්න මෙන්න.

තීරු:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... ඕෆ්සෙට් ....... .ඩටා. .......භාවිතා නොකරනලද........

— තාක්‍ෂණය
source

ට්විටර් බූට්ස්ට්‍රැප් 3 භාවිතා කරමින් තීරුවක් කේන්ද්‍රගත කරන්න

ප්‍රවේශය 1 (ඕෆ්සෙට්):

ප්‍රවේශය 2 (පැරණි margin:auto)

යාවත්කාලීන 2018

HTML:

CSS:

වගු පිරිසැලසුම් යාන්ත්‍රණය භාවිතා කිරීමෙන් අපට මෙය සාක්ෂාත් කරගත හැකිය:

නියැදි නිරූපණය මෙහි ඇත

ප්‍රවේශය 2 (පැරණි `margin:auto`)