আমি কীভাবে একই ডিভিতে দুটি বোতামের মধ্যে স্থান তৈরি করতে পারি?

Question

অনুভূমিকভাবে বুটস্ট্র্যাপ বোতাম স্পেস করার সর্বোত্তম উপায় কী?

এই মুহুর্তে বোতামগুলি স্পর্শ করছে:

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

jsfiddle সমস্যা দেখাচ্ছে: http://jsfiddle.net/hhimanshu/sYLRq/4/

Comments

আমার একই সমস্যা ছিল এবং মিটার -1 বোতামের একটিতে মার্জিন যুক্ত করা শেষ হয়েছিল।

— অনন্ত

Answer 1

তাদের ভিতরে রাখা btn-toolbarঅথবা অন্য কোনো ধারক না btn-group। btn-groupতাদের একসাথে যোগদান। বুটস্ট্র্যাপ ডকুমেন্টেশন সম্পর্কিত আরও তথ্য ।

সম্পাদনা করুন: আসল প্রশ্নটি বুটস্ট্র্যাপ ২.x এর ছিল, তবে এটি এখনও বুটস্ট্র্যাপ 3 এবং বুটস্ট্র্যাপ 4 এর জন্য বৈধ ।

ইন বুটস্ট্র্যাপ 4 আপনি এই ধরনের MX-2 যেমন ইউটিলিটি ক্লাস, ব্যবহার করে আপনার গোষ্ঠীতে উপযুক্ত মার্জিন যোগ করার জন্য প্রয়োজন হবে।

Comments

আমি কয়েক বছর আগে এই সমস্যার সমাধান খুঁজছিলাম, কেন আগে আপনাকে খুঁজে পেলাম না, আপনি আমার নায়ক

— হাকান ফস্টিক

কি সোজা উত্তর! আমার দিনের নায়ক :)

— নাগা

btn-toolbarএকটি নতুন লাইনে কিছু বোতাম মোড়ানো হতে পারে। কীভাবে এড়ানো যায়?

— lukas84

এটি প্রতিক্রিয়াশীলতা জন্য বিরতি পরিকল্পনা। যদি সত্যিই আপনি এটা ভঙ্গ থেকে বিরত চান, তাহলে সেট flex-wrap: nowrapজন্য btn-toolbarবুটস্ট্র্যাপ 4 বা সংমিশ্রণ দিয়ে চেষ্টা overflowএবং white-spaceপুরোনো বুটস্ট্র্যাপ সংস্করণের জন্য।

— মিরোস্লাভ পপোভিচ

@ সোভেন্ড, "বাটন গ্রুপ" বিভাগে কিছুটা নীচে দেখুন - getbootstrap.com/docs/4.1/components/button-group/…

— মিরোস্লাভ

Answer 2

ব্রো মিরোস্লাভ পপোভিচ জানিয়েছেন, কেবল ক্লাসে (ক্লাস = "বিটিএন-সরঞ্জামদণ্ড") বোতামগুলি রেখে দিন t এটি দুর্দান্ত কাজ করে।

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

Answer 3

আপনি বুটস্ট্র্যাপের জন্য স্পেসিং ব্যবহার করতে পারেন এবং কোনও অতিরিক্ত সিএসএসের প্রয়োজন নেই। আপনার বোতামগুলিতে ক্লাস যুক্ত করুন। এটি সংস্করণ 4 এর জন্য।

Comments

আমি চেয়েছিলাম বোতামগুলি একটি সারিতে প্রদর্শিত হবে এবং তাদের জন্য ছোট পর্দায় স্ট্যাকের (মোড়ানোর কারণে) অনুমতি দিন। আনুভূমিকভাবে এবং উল্লম্বভাবে উভয়ভাবেই কাজ করা স্পেসিং অর্জনের জন্য, বুটস্ট্র্যাপ যা সরবরাহ করে তা ব্যবহার করে, আমি করেছি: className='mb-2 mr-2'@ ড্রাগন-বি এর পরামর্শ অনুসরণ করে

— ABCD.ca

Answer 4

আপনার বুটস্ট্র্যাপ v.4 ব্যবহার করা উচিত

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

Comments

এটি বুটস্ট্র্যাপ 4 আইএমওর জন্য সেরা সমাধান। ছোট পর্দায় আপনি সেই অনুযায়ী প্যাডিং থেকে মুক্তি পেতে "px-0 px-sm-2" ব্যবহার করতে পারেন। দুর্দান্ত উত্তর।

— আরএম-কোড

Answer 5

ড্রাগন বি যা পরামর্শ দিয়েছে তা হ'ল বুটস্ট্র্যাপ 4 এ যাওয়ার সঠিক উপায় I আমি নীচে একটি উদাহরণ রেখেছি। যেমন মিঃ -3 হ'ল মার্জিন-রাইট: 1 মিম! গুরুত্বপূর্ণ

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

PS: আমার ক্ষেত্রে আমি চাইতাম আমার বোতামগুলি স্ক্রিনের ডানদিকে প্রদর্শিত হবে এবং তাই ডানদিকে টানুন।

Comments

btn-toolbarস্পেস ইস্যু ঠিক করতে বোতাম মোড়ানো !

— আরসলান আমির

Answer 6

বেশিরভাগ পরিস্থিতিতে সবচেয়ে সহজ উপায় হ'ল মার্জিন।

আপনি যেখানে করতে পারেন:

button{
  margin: 13px 12px 12px 10px;
}

অথবা

button{
  margin: 13px;
}

Comments

আপনি যখন বিটিএন-টুলবার শ্রেণীর অভ্যন্তরে বুটস্ট্র্যাপ বোতামগুলি রাখতে পারেন তখন কাস্টম মার্জিনগুলি ব্যবহার করা উচিত নয়।

— মিলিশনেয়ার

Answer 7

আমি বুটস্ট্র্যাপ 4 প্লাগ ইন বোতাম (ব্যবহৃত https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) এবং বর্গ যোগ বৃত্তাকার লেবেল এবং ক্লাসে MX -1 মধ্যম বাটন অর্জন করা পছন্দসই চেহারা এবং পৃথক রেডিও বোতামগুলির অনুভূতি। বিটিএন-টুলবার ক্লাসটি ব্যবহার করে আমার কাছে বেতার বোতামের বৃত্তগুলি উপস্থিত হয়েছিল যা আমি যা চাইছিলাম তা নয়। আশা করি এটি কাউকে সাহায্য করবে।

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

Answer 8

এটি অর্জনের আর একটি উপায় হ'ল আপনার বোতামগুলিতে একটি শ্রেণি .btn-space যুক্ত করা

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

এবং নিম্নলিখিত হিসাবে এই শ্রেণীর সংজ্ঞা

.btn-space {
    margin-right: 15px;
}

Answer 9

আমি আসলে একই প্রয়োজনে দৌড়েছি। আমি কেবল সিএসএস এর মত ওভাররাইড ব্যবহার করি

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

Answer 10

যদি বুটস্ট্র্যাপ ব্যবহার করে থাকেন তবে আপনি স্টাইলের মতো পরিবর্তন করতে পারেন: আপনি যদি কেবলমাত্র একটি পৃষ্ঠায় চান, তবে বেটউইন হেড ট্যাগ যুক্ত করুন betwen .btn-গ্রুপ বিটিএন {মার্জিন-রাইট: 1 রেম; add যুক্ত করুন

যদি সমস্ত ওয়েব সাইটের জন্য হয় তবে সিএসএস ফাইল যুক্ত করুন

Answer 11

ড্রাগন বি সমাধানটি সঠিক। আমার ক্ষেত্রে স্ট্যাকিংয়ের সময় আমার বোতামগুলি উল্লম্বভাবে ফাঁকা করা দরকার ছিল তাই আমি তাদের সাথে এমবি -2 সম্পত্তি যুক্ত করেছি।

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

Answer 12

আমি মার্ক ডিব যা করেছে তার অনুরূপ কিছু করে শেষ করেছি, তবে কিছুটা আলাদা পদ্ধতিতে আমার ফাঁকা স্থানটি খুঁজে বের করতে হবে।

col-xবুটস্ট্র্যাপ ক্লাস একটি পরম lifesaver হতে পারবেন না। আমি এর অনুরূপ কিছু করে শেষ করেছি:

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

এটি আমাকে সুন্দরভাবে ব্যবধানে শিরোনাম এবং ইনপুট সুইচগুলি সারিবদ্ধ করার অনুমতি দিয়েছে। একই ধারণাটি বোতামগুলিতে প্রয়োগ করা যেতে পারে এবং আপনাকে বোতামগুলি স্পর্শ করা বন্ধ করতে দেয়।

(পার্শ্ব নোট: আমি এটি উপরের লিঙ্কটিতে একটি মন্তব্য হতে চেয়েছিলাম, তবে আমার খ্যাতি যথেষ্ট নয়)