วิธีสร้างปุ่มความกว้างคงที่แบบกำหนดเองใน Foundation 5 โดยใช้มิกซ์สไตล์กลุ่มปุ่ม

ฉันกำลังพยายามสร้างแถบปุ่มแบบกำหนดเองโดยจัดกึ่งกลางแถวโดยใช้ Foundation 5 mixins โดยที่ปุ่มมีความกว้างเท่ากันตามขนาดของปุ่มที่ใหญ่ที่สุดในกลุ่ม ในเวอร์ชันวานิลลา แค่เพิ่มเลขคู่ 4 ลงในคลาสก็สามารถทำได้ แต่ดูเหมือนว่าฉันจะไม่ได้รับไวยากรณ์ที่ถูกต้องสำหรับแถบปุ่มแบบกำหนดเอง

HTML

<div class="small-12 small-centered columns">
<ul class="top-nav">
<li><a href="/th#" class="topnavbtn">Instructions</a></li>
<li><a href="/th#" class="topnavbtn">Glossary</a></li>
<li><a href="/th#" class="topnavbtn">Documents</a></li>
<li><a href="/th#" class="topnavbtn">Links</a></li>
</ul>
</div>

ซีเอสเอส

.top-nav {
    @include button-group-container(true, false);
    text-align:center;
    .topnavbtn {
        $button-border-width: 1px;
        $button-border-style: solid;
        @include button($button-tny, #c0ced7, false, false, false, false);
    }

    & > li {
    @include button-group-style(true, 4);
    display:inline-block;
    float:none;
  }
}

css zurb-foundation
person user3250802    schedule 30.01.2014    source แหล่งที่มา

คำตอบ (1)


arrow_upward
0
arrow_downward

ลองเปลี่ยนบรรทัดนี้:

@include button($button-tny, #c0ced7, false, false, false, false);

สำหรับสิ่งนี้:

@include button($button-tny, #c0ced7, false, true, false, false);

หรือเพื่อความชัดเจนยิ่งขึ้น:

@include button(
  $padding: $button-tny,
  $bg: #c0ced7,
  $full-width: true
);

คลาส even-4 ไม่ได้ปรับขนาดแต่ละปุ่มตามขนาดของปุ่มที่ใหญ่ที่สุดในกลุ่ม โดยกำหนดความกว้างไว้ที่ 100/4 = 25% ให้กับแต่ละปุ่ม มิกซ์อินสไตล์กลุ่มปุ่มที่ทำสิ่งนี้ยังตั้งค่าความกว้างขององค์ประกอบลูกเป็น 100% ซึ่งเป็นสาเหตุที่เวอร์ชัน 'วานิลลา' (เช่น มิกซ์อินที่ไม่ใช่แบบกำหนดเอง) ส่งผลให้ได้ปุ่มที่ดีและมีขนาดเท่า ๆ กัน ในกรณีนี้ แต่ละรายการจะใช้พื้นที่ 100% ของ 25% = 25% ของความกว้างของคอนเทนเนอร์

อย่างไรก็ตาม ตามค่าเริ่มต้น ปุ่มมิกซ์อินจะใช้ช่องว่างภายในเพื่อกำหนดขนาดของปุ่ม นั่นคือไม่ใช่ 100% ของความกว้างของคอนเทนเนอร์ เว้นแต่คุณจะผ่าน $full-width: true เนื่องจากคุณใช้ค่าเริ่มต้นที่ $full-width: false มิกซ์อินแบบกลุ่มปุ่มจึงถูกแทนที่โดยปุ่มมิกซ์อิน และปุ่มของคุณจะมีระยะห่างเท่ากันแต่มีขนาดต่างกัน

person bfin    schedule 30.04.2014