我需要制作一个bootstrap v4页面RTL。
当我添加dir="rtl"
属性时,input-group
元素样式混乱了:
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" dir="rtl">
<div class="row">
<div class="col">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<span class="input-group-addon">0.00</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
</div>
</div>
</div>
我正在使用 Bootstrap v4.0.0-alpha.6
我正在寻找一种方法来修复这些风格?
答案 0 :(得分:2)
由于RTL支持将在稍后发布 - from github commet:
没有人,但不要担心,鉴于人们要求RTL的次数,我们不会很快忘记它。但是我们不会因此而推迟v4.0.0。 RTL可能会在稍后的次要版本中出现(例如v4.2.0)
我创建了一个CSS代码段来修复input group
元素的RTL问题:
[dir="rtl"] .input-group-addon:not(:last-child){
border-right: 1px solid rgba(0,0,0,.15);
border-left: 0;
}
[dir="rtl"] .input-group .form-control:not(:last-child),
[dir="rtl"] .input-group-addon:not(:last-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),
[dir="rtl"] .input-group-btn:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.dropdown-toggle{
border-bottom-right-radius: .25rem;
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
[dir="rtl"] .input-group .form-control:not(:first-child),
[dir="rtl"] .input-group-addon:not(:first-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.dropdown-toggle,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn:not(:first-child){
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: .25rem;
border-top-left-radius: .25rem;
}
[dir="rtl"] .form-control + .input-group-addon:not(:first-child){
border-left: 1px solid rgba(0,0,0,.15);
border-right: 0;
}
[dir="rtl"] .input-group .form-control:not(:first-child):not(:last-child),
[dir="rtl"] .input-group .input-group-addon:not(:first-child):not(:last-child){
border-radius: 0;
}
检查代码段:
[dir="rtl"] .input-group-addon:not(:last-child){
border-right: 1px solid rgba(0,0,0,.15);
border-left: 0;
}
[dir="rtl"] .input-group .form-control:not(:last-child),
[dir="rtl"] .input-group-addon:not(:last-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),
[dir="rtl"] .input-group-btn:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.dropdown-toggle{
border-bottom-right-radius: .25rem;
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
[dir="rtl"] .input-group .form-control:not(:first-child),
[dir="rtl"] .input-group-addon:not(:first-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.dropdown-toggle,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn:not(:first-child){
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: .25rem;
border-top-left-radius: .25rem;
}
[dir="rtl"] .form-control + .input-group-addon:not(:first-child){
border-left: 1px solid rgba(0,0,0,.15);
border-right: 0;
}
[dir="rtl"] .input-group .form-control:not(:first-child):not(:last-child),
[dir="rtl"] .input-group .input-group-addon:not(:first-child):not(:last-child){
border-radius: 0;
}
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" dir="rtl">
<div class="row">
<div class="col">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<span class="input-group-addon">0.00</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
</div>
</div>
</div>
我使用的值(1px solid rgba(0,0,0,.15)
和.25rem
)在当前版本的bootstrap v4中是默认值。