টুইটার বুটস্ট্র্যাপ - সারিগুলির মধ্যে শীর্ষ স্থান যুক্ত করুন

483

class="row"টুইটার বুটস্ট্র্যাপ কাঠামো ব্যবহার করে কীভাবে উপাদানগুলিতে মার্জিন টপ যুক্ত করবেন ?

css  twitter-bootstrap 
— এটা আমি
সূত্র

উত্তর:

801

টুইটার বুটস্ট্র্যাপে সারিটি সম্পাদনা করা বা ওভাররাইড করা একটি খারাপ ধারণা, কারণ এটি পৃষ্ঠার মজাদার একটি মূল অংশ এবং আপনার শীর্ষ সীমা ছাড়াই সারি প্রয়োজন হবে will

এটি সমাধানের জন্য পরিবর্তে একটি নতুন শ্রেণি তৈরি করুন "টপ-বাফার" যা আপনার প্রয়োজনীয় স্ট্যান্ডার্ড মার্জিন যুক্ত করে।

.top-buffer { margin-top:20px; }

এবং তারপরে এটি সারি ডিভগুলিতে ব্যবহার করুন যেখানে আপনার শীর্ষের মার্জিনের প্রয়োজন।

<div class="row top-buffer"> ...
— Acyra
সূত্র
45
নেটিভ সারিটি সম্পাদনা করা একটি কাঠামোর জন্য ভুল, এবং নতুন শ্রেণীর কেবল সারি শ্রেণীর পরিপূরক হওয়া উচিত ... এটি একটি সূক্ষ্ম পার্থক্য তবে টুইটার বুটস্ট্র্যাপে সারিটির একটি নির্দিষ্ট পৃষ্ঠা বিন্যাসের ভূমিকা রয়েছে। যাইহোক, আমি কেবল সাহায্য করার চেষ্টা করছি, আমার সমাধান সমস্যাটির জন্য কার্যকারী।
— আকায়রা
11
যাইহোক, এই উত্তরগুলি সামান্য আলাদা আইএমএইচও। এটি আরও ব্যবহারযোগ্য কারণ এটি "আপনার শ্রেণীর শৈলীর নাম দিন যাতে আপনার এইচটিএমএল আরও সহজভাবে পড়তে পারে" এবং আপনি রো-স্পেসিফিক ফরফর্মের পরিবর্তে এইচটিএমএলে মার্জিন-টপ পড়তে পারেন। এই উত্তরটি টুইটার বুটস্ট্র্যাপ নিদর্শনগুলির সাথে আরও ইনলাইন।
— ডিন হিলার
2
তারা বুটস্ট্র্যাপ 4 এ নির্দিষ্ট উল্লম্ব স্পেসিং ক্লাস যুক্ত করতে যাচ্ছেন: github.com/twbs/bootstrap/issues/4286
— আইসিসি
2
এই মন্তব্যগুলি থেকে আমি যা শিখেছি তা হল বিকাশকারীরা খুব মতামতযুক্ত এবং কিছু 2 + 3 = 5 এবং অন্যরা 3 + 2 = 5. অগ্রসর হয় ...
— ফ্যাবিও এস
3
@FabioS। যা শিখতে হবে তা হ'ল বুটস্ট্র্যাপের মতো কাঠামোর জন্য, স্থানীয় কোডটি সম্পাদনা করা বা ওভাররাইট করা এটি একটি খারাপ ধারণা। দৃশ্যগুলি অন্তহীন তবে এখানে কয়েকটি উদাহরণ রয়েছে। ক) ওভাররাইটিং - যদি আপনি .row ক্লাসটি ওভাররাইট করে থাকেন তবে আপনাকে এখন আপনার প্রকল্পের মধ্য দিয়ে যেতে হবে এবং সারিগুলিতে একটি অতিরিক্ত ক্লাস যুক্ত করতে হবে যা মার্জিনটি পাবে না।) নেটিভ কোড সম্পাদনা করা - আপনি কর্মস্থলে একটি প্রকল্পের উত্তরাধিকারী হন এবং আপনি চান বুটস্ট্র্যাপ 4 এ সরাতে; ওহো! কিছুই ঠিক দেখাচ্ছে না !? পূর্ববর্তী বিকাশকারীরা পৃথিবীতে কী পরিবর্তন করেছে সেটির চেষ্টা করার জন্য বুটস্ট্র্যাপ 3 ফাইলটি দিয়ে যাওয়ার ভার এখন আপনার হাতে রয়েছে।
— পেরোইজা
176

ঠিক আছে, তখন আপনাকে কী হবে তা জানাতে, আকায়রা উপরে যেমন বলেছে আমি কিছু নতুন ক্লাস ব্যবহার করে স্থির করেছি:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

আমি যখনই চাই আমি করি <div class="row top7"></div>

ভাল প্রতিক্রিয়াশীল জন্য আপনি যোগ করতে পারেন margin-top:7%পরিবর্তে 5pxউদাহরণস্বরূপ: ডি

— এটা আমি
সূত্র
13
আমি অনুভব করি যে গৃহীত সমাধানের চেয়ে এই সমাধানটি অনেক বেশি মার্জিত।
— rdiaz82
72
এটি একই.
— আলেকজান্দার
@ আলেকসান্দার তবে আরও সাধারণ
— এজাজ
6
এর .top-buffer { margin-top:20px; }থেকে আলাদা কীভাবে .top30 { margin-top:30px; }? ঠিক আছে, যে কোনও বিকাশকারীর দৃষ্টিকোণ থেকে: এটি একই। ব্যবহারের ক্ষেত্রে ফিট করার জন্য অ্যাডজাস্টমেটস এখানে গণনা করা হয় না। বিশেষত না, যদি ওপি তার নিজের প্রশ্নের উত্তর দেয়।
— আলেকজান্ডার
2
ক্লাসিক 17px শীর্ষ মার্জিন; খুব দরকারী.
— adripanico
129

বুটস্ট্র্যাপ 3

আপনার যদি বুটস্ট্র্যাপে সারি আলাদা করতে হয় তবে আপনি কেবল এটি ব্যবহার করতে পারেন .form-group। এটি সারির নীচে 15px মার্জিন যুক্ত করে।

আপনার ক্ষেত্রে, মার্জিন শীর্ষ পেতে, আপনি পূর্ববর্তী .rowউপাদানগুলিতে এই শ্রেণিটি যুক্ত করতে পারেন

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

বুটস্ট্র্যাপ 4

আপনি বিল্ট-ইন স্পেসিং ক্লাস ব্যবহার করতে পারেন

<div class="row mt-3"></div>

শ্রেণীর নামের "টি" এটিকে কেবল "শীর্ষ" সাইডে প্রযোজ্য করে তোলে, নীচে, বাম, ডানদিকে একই ধরণের ক্লাস রয়েছে। সংখ্যাটি স্থানের আকার নির্ধারণ করে।

— Buksy
সূত্র
ফর্ম-গ্রুপ বিএস 4 থেকে ছিনিয়ে নেওয়া হয়েছিল?
— জেড খোলা
3
না, form-groupএখনও উপস্থিত , তবে মার্জিন / প্যাডিংয়ের জন্য বিশেষ ক্লাস যুক্ত করা হয়েছে যা কাজটি করতে পারে এবং আরও বিকল্প রয়েছে।
— বুক্সি
বুটস্ট্র্যাপ ভি 4 এ কি একাধিক পরিবর্তন হয়েছে? আমি এখন 4 এর সংস্করণে আছি এবং mt-3এতটা ব্যবহৃত হয়ে কাজ করি নাform-group
— নিক শোয়াদেয়ার
এটি কাজ করা উচিত , আপনার প্রকল্পের সাথে সংযুক্ত বুটস্ট্র্যাপ সিএসএসে ".mt-3" শ্রেণি সংজ্ঞা রয়েছে কিনা তা পরীক্ষা করুন।
— বুক্সি
81

জন্য বুটস্ট্র্যাপ 4 ব্যবধানের ব্যবহার প্রয়োগ করতে হবে

শর্টহ্যান্ড ইউটিলিটি ক্লাস

নিম্নলিখিত বিন্যাসে:

{সম্পত্তি} {পক্ষের} - {SIZE}

যেখানে সম্পত্তি এক:

  • এম - ক্লাসের জন্য যে মার্জিন সেট করে
  • পি - ক্লাস যে প্যাডিং সেট

পক্ষগুলি যেখানে এক:

  • t - মার্জিন-শীর্ষ বা প্যাডিং-শীর্ষ সেট করে এমন ক্লাসগুলির জন্য
  • বি - ক্লাসগুলির জন্য যা মার্জিন-নীচে বা প্যাডিং-নীচে সেট করে
  • l - ক্লাসগুলির জন্য যা মার্জিন-বাম বা প্যাডিং-বাম সেট করে
  • r - মার্জিন-ডান বা প্যাডিং-রাইট নির্ধারণ করে এমন ক্লাসগুলির জন্য
  • এক্স - ক্লাসের জন্য যা * * বাম এবং * ডান - উভয়ই সেট করে
  • y - এমন ক্লাসের জন্য যা * - টপ এবং * - নীচে উভয়ই সেট করে
  • ফাঁকা - ক্লাসের জন্য যা উপাদানটির 4 টি দিকের মার্জিন বা প্যাডিং সেট করে

যেখানে আকার এক:

  • 0 - ক্লাসের জন্য যা 0 এ সেট করে মার্জিন বা প্যাডিংকে সরিয়ে দেয়
  • 1 - (ডিফল্টরূপে) ক্লাসগুলির জন্য যা মার্জিন বা প্যাডিং $ স্পেসার * .25 এ সেট করে
  • 2 - (ডিফল্টরূপে) ক্লাসগুলির জন্য যা মার্জিন বা প্যাডিং $ স্পেসার * .5 এ সেট করে
  • 3 - (ডিফল্টরূপে) ক্লাসগুলির জন্য যা মার্জিন বা প্যাডিং $ স্পেসারে সেট করে
  • 4 - (ডিফল্টরূপে) ক্লাসগুলির জন্য যা মার্জিন বা প্যাডিংকে $ স্পেসার * 1.5 এ সেট করে
  • 5 - (ডিফল্টরূপে) ক্লাসগুলির জন্য যা মার্জিন বা প্যাডিং $ স্পেসার * 3 এ সেট করে
  • অটো - এমন ক্লাসগুলির জন্য যা মার্জিনকে অটোতে সেট করে

সুতরাং আপনার এগুলির যে কোনও একটি করা উচিত:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

আরও ব্যাখ্যার জন্য ডকগুলি পড়ুন । এখানে লাইভ উদাহরণ চেষ্টা করুন ।

— রাজকরন মিশ্র
সূত্র
3
বুটস্ট্র্যাপ 4 প্রকাশের সাথে এটি এখনই স্বীকৃত উত্তর হওয়া উচিত these এটি অন্তর্নির্মিত ক্লাসগুলির সাথে আসে, নতুন তৈরি করার দরকার নেই।
— ম্যাট কে
45

কখনও কখনও মার্জিন-টপ ডিজাইনের সমস্যা তৈরি করতে পারে:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

সুতরাং, আমি "মার্জিন-টপ ক্লাস" পরিবর্তে "মার্জিন-টপ ক্লাস" তৈরি করার পরামর্শ দিন এবং সেগুলি পূর্ববর্তী আইটেমটিতে প্রয়োগ করুন।

আপনি যদি বুটস্ট্র্যাপ আমদানি করছেন কম বুটস্ট্র্যাপ ফাইলগুলি আনুপাতিক বুটস্ট্র্যাপ থিম স্পেস সহ প্রান্তিক-নীচের শ্রেণিগুলি নির্ধারণ করার চেষ্টা করুন:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}
— kurroman
সূত্র
33

আমি এই ক্লাসগুলি আমার বুটস্ট্র্যাপ স্টাইলশিটে যুক্ত করেছি

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

উদাহরণ

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>
— srmilon
সূত্র
27

আমি শীর্ষ শ্রেণীর মার্জিন পরিবর্তনের জন্য এই ক্লাসগুলি ব্যবহার করছি:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

উপরের উপাদান থেকে 2 মাইল ফাঁক রাখার জন্য যখন আমার একটি উপাদান দরকার তখন আমি এটি ব্যবহার করি:

<div class="row margin-top-20">Something here</div>

আপনি যদি পিক্সেল পছন্দ করেন তবে এটিকে আপনার উপায় হিসাবে পিক্সেলগুলিতে পরিবর্তন করুন।

— Hexodus
সূত্র
6
ভাল ধারণা, তবে আমি সংখ্যাগুলি বিসর্জন দিয়েছি, কারণ সেগুলি খুব নির্দিষ্ট। আপনি যদি এস, এম, এল, এক্সএল, এক্সএক্সএল ইত্যাদির মতো বিমূর্ততাগুলির সাথে লেগে থাকেন তবে আপনি টেমপ্লেটগুলির নাম পরিবর্তন না করে CSS এর মাধ্যমে আকারগুলি পরিবর্তন করতে পারেন।
— মাইক পার্সেল
1
@ মাইকপুরসেল ভাল চিন্তাভাবনা এবং এটি আপনার পক্ষে সঠিক সমাধান হতে পারে। তবে আমি মার্জিন সংজ্ঞা দেওয়ার জন্য আরও সঠিক উপায়টিকে পছন্দ করি। Px এর পরিবর্তে Em ব্যবহার করা খুব সুনির্দিষ্ট না হয়ে এটি অর্জনের জন্য আমাকে একটি শিথিল উপায় দেয়।
— হেক্সডাস
3
<div class="row margin-top-20">ওভার লাভ কী <div class"row" style="margin-top: 2.0em">?
— icc97
@ আইসিসি 97 মূলত, উদ্বেগের আলাদা, তবে এখানে আপনি অন্যান্য মতামত দেখতে পাবেন: stackoverflow.com/a/2612494/1683224 ।
— উইলি মার্কস
@ উইলিমার্কস এটি "টপ-বাফার" (যেমন স্বীকৃত উত্তর হিসাবে) নামের শ্রেণীর ক্ষেত্রে সত্য, তবে মার্জিন-টপ -২০ নামের একটি শ্রেণীর পক্ষে তা বোঝায় না। আপনি যদি মার্জিন-টপ -২০ এর জন্য খুশি না হন তবে 2 সেমে প্যাডিং ব্যতীত অন্য কিছু যুক্ত করতে হবে যা বিভ্রান্তিকর হবে।
— থিম
4

মার্জিন-শীর্ষের জন্য বুটস্ট্র্যাপ 4 আলফা: শর্টহ্যান্ড সিএসএস ক্লাসের নামগুলি এমটি -1, এমটি -2 (এমটি-এলজি -5, এমটি-এসএম -2) নীচের, ডান, বামের জন্য একই, এবং আপনার অটো ক্লাস এমিলি- স্বয়ংক্রিয়

    <div class="mt-lg-1" ...>

ইউনিট থেকে এসেছ 1করতে 5: variables.scss যার মানে যদি আপনি Mt -1 এটা .25rem মার্জিন উপরের দেয় সেট।

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

এখানে আরও পড়ুন

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

— শরিফ SALEH
সূত্র
3

.Ssss ফাইলটিতে এই শ্রেণিতে যুক্ত করুন:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

অথবা একটি নতুন শ্রেণী তৈরি করুন এবং এটিকে উপাদানটিতে যুক্ত করুন

.rowSpecificFormName td {
    margin-top: 50px;
}
— নীলসেন রামন
সূত্র
7
আহম্মম্মম্মে আমি সিএসএস টোটোচ পছন্দ করি না, যদি আমার অন্যান্য পৃষ্ঠাগুলিতে কোনও সীমা ছাড়াই সারি প্রয়োজন হয়?
— এটিমে
আপনি একটি নতুন ক্লাস তৈরি করতে পারেন .রো স্পেসিফিকফর্ম
— রামন
2
তবে টুইটার বুটস্ট্র্যাপে কেবল 'মার্জিন-টপ' এর জন্য কোনও নির্ধারিত সিএসএস শ্রেণি নেই।
— নীলসান রামন
আশ্চর্যজনক তারা উল্লম্বভাবে কয়েকটি ক্লাস ফোরস্প্যাকিং সেট করেন নি, আমাকে তাদের যুক্ত করা দরকার অন্য কোনও সমাধান নেই: /, ধন্যবাদ নীলসন
— 9:34
8
সিএসএস ক্যাসকেডগুলি মনে রাখবেন, সুতরাং আপনাকে কখনই বুটস্ট্র্যাপ সিএসএস সম্পাদনা করতে হবে না।
— ওনজ
1

আপনি যদি কেবল একটি পৃষ্ঠায় পরিবর্তন করতে চান তবে নীচের শৈলীর বিধি যুক্ত করুন:

 #myCustomDivID .row {
     margin-top:20px;
 }
— fredyfx
সূত্র
1

বুটস্ট্র্যাপ 4 আলফা + এ আপনি এটি ব্যবহার করতে পারেন 

class margin-bottom-5

ক্লাসগুলি ফর্ম্যাটটি ব্যবহার করে নামকরণ করা হয়েছে: {property}-{sides}-{size}

— আল কারাশি
সূত্র
1 
just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>
— শিব কৃষ্ণ
সূত্র
আপনার উত্তরে ব্যাখ্যা যোগ করুন। কোন ব্যাখ্যা ছাড়াই উত্তর দেওয়া অকেজো।
— ADreNaLiNe-DJ
1

Bootstrap3

সিএসএস (কেবলমাত্র নাড়ি, চারপাশে মার্জিন ছাড়াই):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

সিএসএস (চারপাশে সমান মার্জিন, 15px / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

ব্যবহার:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(SASS বা কম 15px বুটস্ট্র্যাপ থেকে পরিবর্তনশীল হতে পারে)

— Isometriq
সূত্র
0

আপনি এই কোডটি যুক্ত করতে পারেন: 

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
— Tarak_bz
সূত্র
0

আপনি যদি বুটস্ট্র্যাপ ৩.৩. using ব্যবহার করছেন তবে আপনি এনপিএমের মাধ্যমে ওপেন সোর্স লাইব্রেরি বুটস্ট্র্যাপ-স্পেসার ব্যবহার করতে পারেন

npm install bootstrap-spacer

অথবা আপনি গিথুব পৃষ্ঠাটি দেখতে পারেন:

https://github.com/chigozieorunta/bootstrap-spacer

এটি .रो-স্পেসার শ্রেণি ব্যবহার করে কীভাবে স্পেস সারিগুলিতে কাজ করে তার একটি উদাহরণ এখানে:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

যদি আপনার কলামগুলির মধ্যে ফাঁকা স্থান প্রয়োজন হয় তবে আপনি .row-col-spacer শ্রেণিটিও যুক্ত করতে পারেন: 

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

এবং আপনি বিভিন্ন .রো-স্পেসার এবং .রো-কোল-স্পেসার ক্লাস একসাথে একত্রিত করতে পারেন:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>
— চিগোজি ওড়ন্ত
সূত্র
1
আমি 40 লাইন সিএসএসের জন্য নির্ভরতা যুক্ত করার বিরুদ্ধে পরামর্শ দেব
— অ্যান্ড্রু ডায়মন্ড
-3

আমার কৌশল। এত পরিষ্কার নয়, তবে আমার পক্ষে ভাল কাজ করে

<p>&nbsp;</p>
— asiniy
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.