直下の Button・Badge・Form の .input や .select を連結させられるレイアウト CSS。
| Selector | Description |
|---|---|
.joint | 連結用のラッパー。直下に .button .badge .input .select を配置します。 |
<div class="joint">
<button class="button is-outline" type="button">
<i aria-hidden="true" class="fas fa-align-left is-fit is-margin-right-xxs"></i>
<span class="text">左揃え</span>
</button>
<button class="button is-outline" type="button">
<i aria-hidden="true" class="fas fa-align-center is-fit is-margin-right-xxs"></i>
<span class="text">中央揃え</span>
</button>
<button class="button is-outline" type="button">
<i aria-hidden="true" class="fas fa-align-right is-fit is-margin-right-xxs"></i>
<span class="text">右揃え</span>
</button>
</div><div class="joint">
<span class="badge is-plain">Build</span>
<span class="badge is-plain is-success">Passing</span>
</div><div class="joint">
<div class="select">
<select>
<option>Select A</option>
<option>Select B</option>
<option>Select C</option>
</select>
</div>
<input type="text" class="input" name="text" placeholder="キーワード">
<button type="submit" class="button is-plain is-info">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>$selector-joint.joint$selector-joint-child-button.button$selector-joint-child-badge.badge$selector-joint-child-input.input$selector-joint-child-select.select$selector-joint-child-select-coreselect$modifier-joint-exclude.is-joint-excludemusubii-style-joint()musubii-style-joint-child-right-radius-break()musubii-style-joint-child-left-radius-break()musubii-style-joint-child-border-left-break()musubii-style-joint-child-focus()