Bootstrap 4输入组RTL问题

Question

我需要做一个bootstrap v4 page 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

我正在寻找一种修复这些样式的方法？

Answer 1

作为RTL支持将在以后出现 - 来自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的当前版本中默认是