在Bootstrap 4中对齐文本问题

Question

我正在使用Bootstrap 4并尝试在左侧和右侧创建内容，但似乎无法使内容正确。这必须是一个简单的问题。这是我的代码：

<div id="dashboard-page">
    <nav class="navbar navbar-expand-lg navbar-light navbar-bg">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-11 ml-auto"><div>Left</div>
                </div>
                <div class="col-xs-1 text-right ml-auto">Right</div>
            </div>
        </div>
    </nav>
</div>

这是我的问题Fiddle。您会看到“左”和“右”彼此相邻。我希望“左”在屏幕的左侧，“右”在屏幕的右侧。