টুইটার বুটস্ট্র্যাপ ব্যবহার করে উল্লম্ব সাদা স্থান যুক্ত করবেন?

162

টুইটারের বুটস্ট্র্যাপ ব্যবহার করে উল্লম্ব সাদা স্থান যুক্ত করার সর্বোত্তম উপায় কী?

উদাহরণস্বরূপ, ধরা যাক যে আমি একটি অবতরণ পৃষ্ঠা তৈরি করছি এবং একটি নির্দিষ্ট বোতামের উপরে এবং নীচে কিছুটা ফাঁকা সাদা জায়গা চাই (100px)। স্পষ্টতই, আমি সেই নির্দিষ্ট বোতামটির জন্য একটি নির্দিষ্ট শ্রেণি তৈরি করতে পারি। তবে, আমি মনে করব বুটস্ট্র্যাপের উল্লম্ব ফাঁকা জায়গাগুলিতে একটি DRY উপায় থাকা উচিত ।

— রায়ান
সূত্র

39

ইন বুটস্ট্র্যাপ 4 আছে ব্যবধান utilites ।

ব্যবহৃত স্বরলিপি জন্য ডকুমেন্টেশন উদ্ধৃত :

ব্যবধান ইউটিলিটি থেকে সব ব্রেকপয়েন্ট প্রযোজ্য হলেও, xsথেকে xl, তাদের মধ্যে কোন ব্রেকপয়েন্ট সংক্ষেপ আছে। কারণ এই ক্লাসগুলি উপর থেকে প্রয়োগ করা হয় min-width: 0এবং এটি কোনও মিডিয়া ক্যোয়ারির দ্বারা আবদ্ধ হয় না। বাকি ব্রেকপয়েন্টগুলিতে একটি ব্রেকপয়েন্ট সংক্ষিপ্তকরণ অন্তর্ভুক্ত থাকে।

ক্লাস বিন্যাস ব্যবহার নামকরণ করা হয় {property}{sides}-{size}জন্য xs এবং {property}{sides}-{breakpoint}-{size}জন্য sm, md, lg, এবং xl।

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

m - সেট করা ক্লাসগুলির জন্য margin

p - সেট করা ক্লাসগুলির জন্য padding

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

t- সেট করা ক্লাস margin-topবা জন্যpadding-top

b- সেট করা ক্লাস margin-bottomবা জন্যpadding-bottom

l- সেট করা ক্লাস margin-leftবা জন্যpadding-left

r- সেট করা ক্লাস margin-rightবা জন্যpadding-right

x- উভয় সেট *-leftএবং ক্লাস জন্য*-right

y- উভয় সেট *-topএবং ক্লাস জন্য*-bottom

ফাঁকা - ক্লাসগুলির জন্য যা উপাদানটির 4 টি দিক marginবা একটিতে সেট paddingকরে

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

0 - এমন ক্লাসগুলির জন্য যা সেট করে মার্জিন বা প্যাডিং নির্মূল করে 0

1- (ডিফল্ট অনুসারে) শ্রেণীর জন্য যে সেট marginবা paddingকরার$spacer * .25

2- (ডিফল্ট অনুসারে) শ্রেণীর জন্য যে সেট marginবা paddingকরার$spacer * .5

3- (ডিফল্ট অনুসারে) শ্রেণীর জন্য যে সেট marginবা paddingকরার$spacer

4- (ডিফল্ট অনুসারে) শ্রেণীর জন্য যে সেট marginবা paddingকরার$spacer * 1.5

5- (ডিফল্ট অনুসারে) শ্রেণীর জন্য যে সেট marginবা paddingকরার$spacer * 3

সুতরাং কোনও উপাদানটির উপরে এবং নীচে কিছু অতিরিক্ত উল্লম্ব স্থান রাখতে আপনি my-5ক্লাস ব্যবহার করবেন ।

— vlp
সূত্র

3

আপনি কি একটি বৈধ শ্রেণীর স্ট্রিংয়ের উদাহরণ দিতে পারেন?

— কলব ক্যানিয়ন

নিস! এটা অসাধারণ.

— টিকি

51

ভি 2-তে, এত বেশি উল্লম্ব জায়গার জন্য অন্তর্নির্মিত কিছু নেই, তাই আপনি একটি কাস্টম শ্রেণীর সাথে লেগে থাকতে চাইবেন। ছোট উচ্চতার জন্য, আমি সাধারণত কেবল <div class="control-group">একটি বোতামের চারপাশে ফেলে দিই ।

— jmdeldin
সূত্র

8

বা <

— ডি

9

ধন্যবাদ। আমি এখন এই ব্যবহারের জন্য কিছু স্পেসার 10, স্পেসার 50, ইত্যাদি শ্রেণি তৈরি করেছি। আমি দেখতে পাচ্ছি এর জন্য ইতিমধ্যে গিথুবে

— রায়ান

1

@ রায়ান: খুব ভাল, টানার অনুরোধটি দেখেনি। আমি এতে কিছুটা দ্বন্দ্ব বোধ করছি। বুটস্ট্র্যাপ প্রায় সম্পূর্ণ উপস্থাপনযোগ্য (এবং সুবিধাজনক) তবে আপনি অতিরিক্ত সমস্ত এইচটিএমএল উপেক্ষা করার পক্ষে যথেষ্ট পরিমাণে স্কিন্ট করলে আপনি এ থেকে শব্দার্থ আবিষ্কার করতে পারেন। উল্লম্ব ব্যবধান বিশুদ্ধভাবে উপস্থাপনযোগ্য, তাই আমি মনে করি এটি একটি কাস্টম শ্রেণি / আইডি দিয়ে সেরা হয়েছে best

— jmdeldin

2

এটি ভি 2 এর জন্য ছিল, তবে দেখে মনে হচ্ছে v3 চারপাশের ব্যবধানকে হ্রাস করেছে .btn-toolbar, সুতরাং আপনার নিজের মার্জিন সহ কেবল একটি নতুন ক্লাস যুক্ত করা উচিত।

— jmdeldin

3

স্পষ্টতই গিথুব বৈশিষ্ট্যটির অনুরোধটি বন্ধ করা হয়েছে এবং বৈশিষ্ট্যটি এটি বুটস্ট্র্যাপ ভি 4-এ তৈরি করতে পারে। bit.ly/R9oap9

— রায়ান 21

48

মোড়ানো কাজ করে তবে যখন আপনি কেবল একটি জায়গা চান, আমি পছন্দ করি:

<div class="col-xs-12" style="height:50px;"></div>

— লুকানো-ব্যবহারকারীর নাম
সূত্র

16

বুটস্ট্র্যাপের সাথে কাজ করার সময় একটি ইনলাইন শৈলী যুক্ত করা ভাল ধারণা নয়। এটি কমপক্ষে সিএসএসে প্রবেশ করা উচিত।

— আলেক্সিকোট

2

লক্ষ্য করুন যে "কল-এক্সএস -12" হ'ল একেবারে কোনও ক্লাস না থাকার মতো

— সলডেপ্লাটা সাকেটোস

34

এখানে একটি পুরানো কবর খননের জন্য দুঃখিত, তবে কেন কেবল এটি করা হয় না?

<div class="form-group">
    &nbsp;
</div>

এটি একটি সাধারণ ফর্ম উপাদানগুলির উচ্চতাতে একটি স্থান যুক্ত করবে।

মনে হয় কোনও ফর্মের প্রায় 1 লাইন প্রায় 50px (আমি স্রেফ পরিদর্শন করেছি এমন উপাদানগুলির 47px)। এটি একটি অনুভূমিক ফর্ম, বাম 2col লেবেল এবং ডান 10col এ ইনপুট। সুতরাং আপনার পিক্সেল বিভিন্ন হতে পারে।

যেহেতু খনিটি মূলত 50px তাই আমি 50px লম্বা একটি স্পেসার তৈরি করবো যার কোন প্রান্ত বা প্যাডিং নেই;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

— ওয়েড
সূত্র

1

এটি গ্রুপের নীচে স্থান যোগ করেছে তবে উপরে নয়

— আইসিসি

অবশ্যই এটি করে, তিনি ঠিক যা চেয়েছিলেন, এটি একটি উল্লম্ব ফাঁকা স্থান যুক্ত করার উপায়। আপনার যদি কাস্টম ফর্ম-গোষ্ঠী বা সারি বা এমনকি একটি বোতামের প্রয়োজন হয় তবে মার্জিনগুলিকে ওভাররাইড করে এটিতে নিজের ক্লাস যুক্ত করুন class উদাহরণস্বরূপ: শ্রেণি = "ফর্ম-গ্রুপ স্পেসড-গ্রুপ" এবং ".স্পিড-গ্রুপ {মার্জিন-শীর্ষ: 15px! গুরুত্বপূর্ণ; মার্জিন-নীচে: 15px! গুরুত্বপূর্ণ;} .. .. এটি কেবল সাধারণ সিএসএস-অর্থে

— ওয়েড

ওপিতে বিশেষভাবে জিজ্ঞাসা করা হয়েছিল: " একটি নির্দিষ্ট বোতামের উপরে এবং নীচে একটি ফাঁকা সাদা স্থানের কিছুটা (100px) "

— আইসিসি

1

না, এটি একটি উদাহরণ ছিল, তাঁর প্রশ্ন নয়। তার প্রশ্নটি ছিল "টুইটারের বুটস্ট্র্যাপ ব্যবহার করে উল্লম্ব ফাঁকা জায়গা যুক্ত করার সর্বোত্তম উপায় কী?" - একটি উল্লম্ব ফাঁকা স্থান নির্দিষ্ট উপাদানের মার্জিনের চেয়ে আলাদা। যদি তিনি সমস্ত বোতামের জন্য এটি করে থাকেন তবে তিনি বিটিএন-র মার্জিন পরিবর্তন করতে বা তার পছন্দসই মার্জিন দিয়ে "বিটিএন-স্পেসড" এর মতো নিজস্ব ক্লাস তৈরি করতে পারেন। যদি তিনি কেবল যেখানেই চান কোনও ফাঁক যোগ করার উপায় চান, তবে আমি উত্তর দেওয়ার মতো একটি নির্দিষ্ট উচ্চতার স্পেসার তার প্রয়োজন। তিনি একটি প্রশ্ন জিজ্ঞাসা করেছেন, এবং অন্য একটি উদাহরণ দিয়েছেন। আমি ধরে নিয়েছিলাম যে তিনি সিএসএসকে যথেষ্ট জানেন যে তিনি মার্জিনগুলিকে ওভাররাইড করতে পারেন know

— ওয়েড

যেহেতু তিনি একটি DRY পদ্ধতি এবং বোতাম বলেছেন, তারপরে আমি যে মার্জিনগুলি চেয়েছিলাম তার সাথে একটি বোতাম শ্রেণি তৈরি করব: বিটিএন-স্পেসড। যদি এটি কেবল বোতামগুলির জন্য না হয় তবে একটি সাধারণ মার্জিন যা সারি, ফর্ম-গোষ্ঠীগুলিতে প্রয়োগ হয়, যাই হোক না কেন। শ্রেণি = "সারি স্পেস-ছোট" বা শ্রেণি = "ফর্ম-গ্রুপ স্পেস-মিডিয়াম" এর মতো .. যেখানে ছোট মাঝারি এবং বড়গুলি কেবল মার্জিনের বৈকল্পিক এবং কার্যত যে কোনও ক্ষেত্রে প্রয়োগ করা যেতে পারে। - কোন অপেপ চায় তা বলা শক্ত। শুধুমাত্র বা কোনও উপাদানগুলির জন্য বাটনগুলির জন্য ..

— ওয়েড

24

আমি জানি এটি পুরানো, তবে আমি এখানে একই জিনিসটি অনুসন্ধান করতে এসেছি, আমি দেখতে পেলাম যে বুটস্ট্র্যাপের এই পরিস্থিতিতে খুব কার্যকর help

<div class="help-block"></div>

— ক্রস
সূত্র

21

সংস্করণ 3 এর জন্য এটি পরিষ্কারভাবে অর্জন করার "বুটস্ট্র্যাপ" উপায় বলে মনে হয় না।

এ panel, এ wellএবং form-groupসমস্ত কিছু কিছু উল্লম্ব ব্যবধান সরবরাহ করে।

স্পষ্টতই বুটস্ট্র্যাপ ভি 4 এর রোডম্যাপে আরও একটি আনুষ্ঠানিক নির্দিষ্ট উল্লম্ব ব্যবধান সমাধান

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

— ErichBSchulz
সূত্র

5

.এসএস-মার্জিন-ডাউন-এ সীমাবদ্ধ থাকায় .ফর্ম-গ্রুপটি সেরা পছন্দ বলে মনে হচ্ছে: 15px x । ওয়েল এবং .প্যানেলটি ব্যবহার করা উচিত নয় যদি আপনি কেবল কিছু স্পেসিং যুক্ত করতে চান কারণ তাদের অন্যান্য বৈশিষ্ট্য রয়েছে (যেমন ব্যাকগ্রাউন্ড, প্যাডিং, সীমান্ত ইত্যাদি)

— xaa

9

আমি কেবল বিভিন্ন উচ্চতা অর্থাত্ একটি ডিভ ক্লাস তৈরি করেছি

<div class="divider-10"></div>

সিএসএস হ'ল:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

যেদিকে উচ্চতা প্রয়োজন তার জন্য কেবল একটি বিভাজক শ্রেণী তৈরি করুন।

— user5593012
সূত্র

8

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

<p>&nbsp;</p>

— asiniy
সূত্র

2

@ জয়কিলেন +1 আপনার উত্তর হিসাবে পোস্ট করা উচিত। সম্ভবত লোকেরা ফ্রেমওয়ার্কগুলিতে নির্ভর করতে শুরু করেছে এবং বেসিকগুলি ভুলে যেতে শুরু করেছে।

— এডজেঙ্কস

5

শুধু ব্যবহার <br/>। আমি এখানে নিজেকে এই প্রশ্নের উত্তর খুঁজছিলাম এবং তারপরে ব্যবহারকারী জাইকিলিন একটি মন্তব্যে প্রস্তাবিত একটি সাধারণ লাইন বিরতি ব্যবহার করার বিষয়ে চিন্তা না করার জন্য একরকম নির্বোধ অনুভব করেছি।

— ADJenks
সূত্র

ডাউনসাইড হ'ল আপনি সঠিক 100px নিয়ন্ত্রণ পান না তবে যুক্তিসঙ্গতভাবে জায়গা যুক্ত করার জন্য এটি অবশ্যই কাজ করা উচিত।

— মিশ্র

1

@ মিক্সড 3 ডি, আপনি ঠিক সেখানে আছেন, আমি প্রথমে খেয়াল করিনি যে তিনি একেবারে 100px হওয়ার বিষয়ে যত্ন নিয়েছেন। আমি ভেবেছিলাম তিনি কেবল একটি "বিট" চান। তিনি অবশ্যই প্রত্যেকের পরামর্শ মতো তাঁর নিজের সহায়ক শ্রেণি তৈরি করতে পারেন। তবে যেহেতু এই পোস্টটি বহু বছরের পুরানো, তিনি এখন সুনির্দিষ্ট ব্যবধানের জন্য স্রেফ বুটস্ট্র্যাপ 4 এ আপগ্রেড করতে পারেন বা এটি থেকে সহায়ক ক্লাস নিতে পারেন।

— এডিজেঙ্কস

5

আমি জানি এটি পুরানো এবং ইতিমধ্যে পোস্ট করা বেশ কয়েকটি ভাল সমাধান রয়েছে, তবে একটি সহজ সমাধান যা আমার পক্ষে কাজ করেছে তা হল নিম্নলিখিত সিএসএস

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

এবং তারপরে আপনার এইচটিএমএলে একটি ডিভ তৈরি করুন

<div class="divider"></div>

— সঞ্জীব
সূত্র

4

আমি ব্যবহার করার চেষ্টা করেছি <div class="control-group">এবং এটি আমার বিন্যাস পরিবর্তন করে নি। এটি উল্লম্ব স্থান যোগ করেনি। আমার পক্ষে যে সমাধানটি কাজ করেছিল তা হ'ল:

<ol style="visibility:hidden;"></ol>

যদি এটি আপনাকে পর্যাপ্ত উল্লম্ব স্থান না দেয় তবে আপনি নীড়যুক্ত <li> </li>ট্যাগগুলি যুক্ত করে ক্রমান্বয়ে আরও পেতে পারেন ।

— জন এর্ক
সূত্র

ধন্যবাদ, এবং আপনার পরামর্শটি বুটস্ট্র্যাপের সাথে বা তার বাইরে কাজ করবে। তবে প্রশ্নটি ছিল স্পেসিং যুক্ত করার জন্য টুইটার বুটস্ট্র্যাপ ব্যবহার সম্পর্কে।

— জোনাথন

1

<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

— গুহা
সূত্র

1

এটি প্রশ্নের উত্তর কীভাবে?

— ম্যাট এস

এটি মূল পোস্টার হিসাবে জিজ্ঞাসা করা হিসাবে উল্লম্ব ব্যবধান যোগ করে, এছাড়াও বুটস্ট্র্যাপ দেবগণ এখন এটি বিটা অবস্থায় সর্বশেষ সংস্করণ (4) এ সরবরাহ করছেন। এটি আসলে সঠিক উত্তর এবং আপনি যদি বুটস্ট্র্যাপে উল্লম্ব ব্যবধান গুগল করেন তবে আপনি দেখতে পাবেন যে এটি আগের জন্য খাটানো হয়নি। আপনি পরীক্ষা করেছেন বা গুগল করেননি এমন জিনিসগুলি দয়া করে কমিয়ে দেবেন না।

— ডেন

আপনি প্রশ্নটি পরিষ্কারভাবে পড়েন নি। "আমি একটি নির্দিষ্ট বোতামের উপরে এবং নীচে একটি ফাঁকা সাদা জায়গা চাই (100px)" " একটি নির্দিষ্ট বোতাম ... একটি নির্দিষ্ট বোতাম ...

— ম্যাট এস

1

তার আগে তিনি বলেছিলেন: "উদাহরণস্বরূপ, বলুন"। এটি কেবল একটি উদাহরণ ছিল, এটি নির্দিষ্ট সমস্যা ছিল না। প্রসঙ্গের বাইরে উদ্ধৃতি না। আমার দেওয়া উদাহরণটি যথেষ্ট এবং আমি যে তথ্য দিয়েছি তা যথেষ্ট is

— ডেন

-3

এর চেয়ে বেশি ডিআরওয়াই আর কিছু নেই

.btn {
    margin-bottom:5px;
}

— PH7
সূত্র

13

আমি বেস বুটস্ট্র্যাপ সিএসএস ক্লাস স্টাইলিং পরিবর্তন করার বিরুদ্ধে সুপারিশ করব।

— জেমস পালাওয়াগা

1

@ জামেসপালাওয়াগা +1। তবে এটি যদি আপনার অ্যাপ্লিকেশন জুড়ে সাধারণ মান হিসাবে বিবেচিত হয় তবে আপনি কম এবং ভেরিয়েবল এবং / অথবা সাবধানে পরিচালিত ওভাররাইড স্টাইলশিটগুলি ব্যবহার করে বুটস্ট্র্যাপ স্টাইলিংকে ওভাররাইড করতে পারেন।

— জোনাথন