বুটস্ট্র্যাপ 4 এ ড্রপডাউনতে তীরটি কীভাবে সরিয়ে ফেলা যায়?

118

আমি বুটস্ট্র্যাপ 4 ব্যবহার করছি drop ড্রপডাউনটিতে আমি তীরটি সরানোর চেষ্টা করেছি।

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

জিসফিল এখানে আছে ।

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>
css  twitter-bootstrap  twitter-bootstrap-4 
— হংবো মিয়াও
সূত্র

উত্তর:

176

উপাদান থেকে কেবল "ড্রপডাউন-টগল" শ্রেণি সরিয়ে ফেলুন। নিম্নরূপে আপনার কাছে ডেটা-টগল বৈশিষ্ট্য থাকলে ড্রপডাউনটি এখনও কাজ করবে

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

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

সম্পাদনা করুন: আপনি যদি বর্ডার স্টাইলিং রাখতে চান তবে ড্রপডাউন ক্লাস রাখুন

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>
— Terlter Kağan alcal
সূত্র
3
কিছু কারণে, অন্যান্য সমাধানগুলি আমার পক্ষে কাজ করছে না। আমি বুটস্ট্র্যাপ চালাচ্ছি This এটিই কাজ করেছিল।
— অজ্ঞাতনামা
9
এটি আমার পক্ষে বেশ কার্যকর হয়নি। বোতামটির ডান দিকটি আর গোল হয় না।
— জেস ব্রাউনিং
!important:) এর সাথে কাস্টম সিএসএস লেখার চেয়ে সহজ
— হুগজাদেবী
2
আমি এটি পরীক্ষা করেছি এবং এটি বেশ ভাল কাজ করে! এফএফ, ক্রোম, আইই ও অপেরা-তে পরীক্ষিত - এমনকি বিল্ট-ইন ব্রাউজার সহ মোবাইল অ্যান্ড্রয়েড ডিভাইসে কোনও বিরক্তিকর তীর নেই - ধন্যবাদ অনেক স্যার! বিজ্ঞপ্তি: সম্পূর্ণ "ড্রপডাউন-টগল" বৈশিষ্ট্যটি সরিয়ে ফেলবেন না, কেবল "-টোগল" বৈশিষ্ট্যটি সরিয়ে ফেলুন, যাতে ড্রপডাউনম্যানুতে আপনার স্টাইলিং পরিত্রাণ পান না। সুতরাং "ড্রপডাউন-টগল" "ড্রপডাউন" এ পরিণত হয় - আশা করি এটি সহায়তা করবে।
— কেরিম ইয়াগমুর্কু
126

CSS সহ, আপনি কেবল এটি করতে পারলেন:

.dropdown-toggle::after {
    display:none;
}
— Clyff
সূত্র
11
!importantএই কাস্টম সিএসএস কার্যকর হওয়ার জন্য আমাকেও অন্তর্ভুক্ত করতে হয়েছিল।
— জেস ব্রাউনিং
1
আপনি যদি একই সিএসএস ব্যবহার করেন তবে এটি অন্য পৃষ্ঠাগুলিতে ব্যবহৃত প্রতিটি ড্রপডাউনকে প্রভাবিত করবে।
— পবন নাথ
কেবলমাত্র বোতামের জন্য তীর অক্ষম করার জন্য আরও কিছু উপসর্গ যুক্ত করুন, যেমন: .btn.btn-outline-দ্বিতীয়। }
— কুকুরছানা
35

আমি বিদ্যমান উত্তরগুলির কোনওরূপ প্রস্তাব দিই না কারণ:

  • .dropdown-toggleশুধু ক্যারেটের চেয়ে আরও স্টাইলিং রয়েছে। উপাদান থেকে শ্রেণি অপসারণ স্টাইলিংয়ের সমস্যাগুলির কারণ হয় ।

  • ওভাররাইডিং এর .dropdown-toggleকোনও অর্থ নেই। আপনার কোনও নির্দিষ্ট উপাদানের কেরেটের দরকার নেই বলে, এর অর্থ এই নয় যে আপনার পরে কোনও প্রয়োজন হবে না।

  • ::afterড্রপডাউন ভেরিয়েন্টগুলি কভার করে না (কিছু ব্যবহার ::before)।

আপনার .caret-offউপাদান হিসাবে একই উপাদান একটি কাস্টম ব্যবহার করুন .dropdown-toggle:

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}
— rybo111
সূত্র
3
সেরা উত্তর, আমি এই শ্রেণীর পাশাপাশি যুক্ত করা উচিত যেমন আমি অন্যান্য মানুষের জন্য কিছু অতিরিক্ত তথ্য যুক্ত করব dropdown-toggle।
— ইস্টেইন
5

আপনি যদি অন্য আইকন (যেমন, ফন্টআউওয়াইস) এর সাহায্যে তীরটি প্রতিস্থাপন করতে আগ্রহী হন তবে আপনাকে কেবল .ড্রপডাউন-টগল এর সিউডো উপাদানটির সীমানা সরিয়ে ফেলতে হবে

.dropdown-toggle::after { border: none; }
— লোগান ফ্র্যাঙ্কলিন
সূত্র
4

আমি আমার প্রকল্পে বেশ কিছু সময়ের জন্য স্বীকৃত উত্তরটি ব্যবহার করছিলাম তবে এখনই বুটস্ট্র্যাপ দ্বারা ব্যবহৃত একটি চলক জুড়ে হোঁচট খেয়েছে :

$enable-caret: true !default;

আপনি যদি এটি মিথ্যাতে সেট করে থাকেন তবে কোনও কাস্টম কোড না করেই ক্যারেটটি সরানো হবে।

আমার প্রকল্পটি রুবি / রেইল ছিল তাই আমি বুটস্ট্র্যাপ-রুবিজেম ব্যবহার করছিলাম । আমি একটি আমদানি করে পরিবর্তনশীল পরিবর্তিত custom-variables.scssআমার মিথ্যা উপরে পরিবর্তনশীল সেট দিয়ে application.scss আগেbootstrap.scss ফাইল / ফাইল।

— bensmithbwd
সূত্র
2

আপনি যদি নীচের মতো ড্রপডাউন-টগল শ্রেণিতে ফিট করে তবে আপনার সিস্টেমে সমস্ত ড্রপডাউন বোতামের আর আর ক্যারেট থাকবে না।

.dropdown-toggle::after {
    display:none;
}

তবে এটি আপনি যা চান তা নয়, তাই কেবলমাত্র নির্দিষ্ট বোতামটি সরাতে আমরা একটি ক্লাসটি সন্নিবেশ করতে যাচ্ছি: রিমোক্রেট, এবং আমরা ক্লাসটি ফিট করব: নীচে ড্রপডাউন-টগল:

.removecaret.dropdown-toggle::after {
    display: none;
}

এবং আমাদের এইচটিএমএল দেখতে এমন কিছু দেখাচ্ছে:

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>
— krekto
সূত্র
1

বুস্টার্প সিএসএস বর্ডার ব্যবহার করে এটি উত্পন্ন করে:

.dropdown-toggle:after {
  border: none;
}
— aceofspades
সূত্র
1

আপনি যদি কেবল এই বুটস্ট্র্যাপ বোতামের ক্লাসে যেতে চান তবে তৈরি করুন:

.btn .dropdown-toggle::after {
    display:none;
}
— এস জেডব্রি
সূত্র
0

আপনি ক্লাসের মধ্যে ট্যাগ = "ক" চেষ্টা করেছেন? এটি আর সিএসএস ছাড়াই তীরটি আড়াল করে।

— jerryurenaa
সূত্র
-2

এটি বুটস্রেপ 4 এবং এনজি-বুটস্ট্র্যাপে কাজ করে। 

.dropdown-toggle:after {
    display: none;
}
— alvic
সূত্র
3
দুই বছরের পুরানো স্বীকৃত উত্তরটি অনুলিপি করা হচ্ছে, তবে একটি টাইপ দিয়ে।
— মিকেন 32
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.