横のメニューに従ってコンテンツを整列する

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を削除し、col-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> 

メニュークラスに

し、[追加]フレキシボックス

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