จะลบลูกศรในดรอปดาวน์ใน Bootstrap 4 ได้อย่างไร?

ฉันใช้ Bootstrap 4 ฉันพยายามลบลูกศรในเมนูแบบเลื่อนลง

ตอบผมพบว่าสำหรับเงินทุน 3 ไม่ทำงานใด ๆ เพิ่มเติม

jsfiddle เป็นที่นี่

<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>

เพียงแค่ลบคลาส "dropdown-toggle" ออกจากองค์ประกอบ เมนูแบบเลื่อนลงจะยังคงใช้งานได้หากคุณมีแอตทริบิวต์ data-toggle ดังนี้

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

การแทนที่รูปแบบคลาส. dropdown-toggle มีผลต่อรายการแบบเลื่อนลงทั้งหมดและคุณอาจต้องการเก็บลูกศรไว้ในปุ่มอื่น ๆ นั่นเป็นเหตุผลว่าทำไมฉันจึงมองว่าเป็นวิธีแก้ปัญหาที่ง่ายที่สุด

แก้ไข: เก็บคลาสแบบเลื่อนลงหากคุณต้องการคงสไตล์เส้นขอบไว้

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

ด้วย css คุณสามารถทำได้:

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

ฉันไม่แนะนำคำตอบใด ๆ ที่มีอยู่เนื่องจาก:

• .dropdown-toggleมีสไตล์ที่มากกว่าแค่คาเร็ต การถอดชั้นจากองค์ประกอบที่ทำให้เกิดปัญหาการจัดแต่งทรงผม

• การลบล้าง.dropdown-toggleไม่สมเหตุสมผล เพียงเพราะคุณไม่ต้องการคาเร็ตในบางองค์ประกอบไม่ได้หมายความว่าคุณจะไม่ต้องการมันในภายหลัง

• ::afterไม่ครอบคลุมตัวแปรแบบเลื่อนลง (การใช้งานบางส่วน::before)

ใช้แบบกำหนดเอง.caret-offในองค์ประกอบเดียวกับองค์ประกอบของคุณ.dropdown-toggle:

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

ลบคลาส "dropdown-toggle"

หากคุณสนใจที่จะแทนที่ลูกศรด้วยไอคอนอื่น (เช่น FontAwesome) คุณเพียงแค่ต้องลบเส้นขอบบนองค์ประกอบหลอกของ. dropdown-toggle

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

ฉันใช้คำตอบที่ยอมรับมาระยะหนึ่งแล้วในโครงการของฉัน แต่ตอนนี้สะดุดกับตัวแปรที่ bootstrap ใช้ :

$enable-caret: true !default;

หากคุณตั้งค่านี้เป็นเท็จเครื่องหมายคาเร็ตจะถูกลบออกโดยไม่ต้องทำโค้ดที่กำหนดเองใด ๆ

โครงการของฉันคือทับทิม / Rails ดังนั้นฉันถูกใช้บูต-RubyGem ผมเปลี่ยนตัวแปรโดยการนำเข้าcustom-variables.scssกับชุดตัวแปรข้างต้นเป็นเท็จในของฉันapplication.scss ก่อนbootstrap.scssไฟล์ / ไฟล์

หากคุณลบคลาสแบบเลื่อนลง - สลับด้านล่างออกปุ่มดรอปดาวน์ทั้งหมดในระบบของคุณจะไม่มีเครื่องหมายคาเร็ตอีกต่อไป

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

แต่บางทีนั่นอาจไม่ใช่สิ่งที่คุณต้องการดังนั้นหากต้องการลบเฉพาะปุ่มเราจะแทรกคลาสที่เรียกว่า: remoecaret และเราจะพอดีกับคลาส: dropdown-toggle ดังนี้:

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

และ html ของเรามีลักษณะดังนี้:

<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>

Boostrap สร้างสิ่งนี้โดยใช้เส้นขอบ CSS:

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

หากคุณต้องการเฉพาะในคลาสปุ่ม bootstrap นี้ให้ทำ:

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

คุณได้ลองใช้ tag = "a" ในชั้นเรียนหรือไม่ มันซ่อนลูกศรโดยไม่ต้อง css ต่อไป

เพิ่ม no-arrow เพื่อเลื่อนลงสลับการประกาศคลาส

ใช้งานได้กับ bootsrap4 และ ng-bootstrap

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