根據水平菜單對齊內容

Question

我正在努力根據水平菜單對齊內容。 我正在使用引導網格來制作菜單，並且菜單中的所有項目都與中心對齊。 我不知道如何使下面的內容與左側“ Autor”文本的開頭和右側的“ Contact”文本的開頭對齊。 您可以在下面的圖片中看到我想說的話。 紅色是我現在擁有的，藍色是我想要實現的。

這是我的代碼。 謝謝您的回答。

菲利普

<div class="container-fluid main">
<div class="row menu">
    <div class="col-md-1"></div>
    <div class="col-md-2 menu-item nopadding"><a href="autor">A U T O R</a></div>
    <div class="col-md-2 menu-item nopadding"><a href="extracts">E X T R A C T S</a></div>
    <div class="col-md-2 menu-item nopadding"><a href="portfolio">P O R T F O L I O</a></div>
    <div class="col-md-2 menu-item nopadding"><a href="text">T E X T</a></div>
    <div class="col-md-2 menu-item nopadding"><a href="contact">C O N T A C T</a></div>
    <div class="col-md-1"></div>
</div>

<div class="row no-gutters autor">
    <div class="col-md-1"></div>
    <div class="col-md-2 nopadding">
        <img src="images/autor/1.jpg" class="autor-image">
    </div>
    <div class="col-md-2"></div>
    <div class="col-md-6 autor-text nopadding">
        <p>
            Jan Dotřel vystudoval Estetiku se zaměřením na teorii fotografie na FF UK. V roce 2016 diplomoval s prací
            Transformace kultovní a konceptuální hodnoty v dějinách fotografie. Již od prvního ročníku se soustředil
            na fotografickou teorii zastoupenou zejména u autorů jako jsou Geoffrey Batchen, Roland Barthes, Walter Benjamin,
            Jaques Derrida, Georges Didi-Huberman, Michel Foucault, nebo Alan Sekula.
        </p>
        <p>
            .....
        </p>

    </div>
    <div class="col-md-1"></div>
</div>

Answer 1

嘗試此操作，使用偏移列而不是插入空白列。

<div class="col-md-2 col-md-offset-1 nopadding"></div>
<div class="col-md-6 col-md-offset-2 autor-text nopadding"></div>

Answer 2

刪除空的div並刪除co​​l-md類。

<div class="row menu">
    <div class="menu-item nopadding"><a href="autor">A U T O R</a></div>
    <div class="menu-item nopadding"><a href="extracts">E X T R A C T S</a></div>
    <div class="menu-item nopadding"><a href="portfolio">P O R T F O L I O</a></div>
    <div class="menu-item nopadding"><a href="text">T E X T</a></div>
    <div class="menu-item nopadding"><a href="contact">C O N T A C T</a></div>
</div>

然后將flexbox添加到菜單類

.menu {
    display:flex;
    justify-content:space-between;
}