如何使用CSS在bootstrap中製作這個樣子？

Question

如何在引導程序與CSS？

Answer 1

試試這個：

.container{ 
 
    display:flex; 
 
    flex-direction:row; 
 
    height:50px; 
 
    overflow:hidden; 
 
} 
 
.right-arrow { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t background: orange; 
 
\t padding:0 15px; 
 
    flex-shrink:0; 
 
    height:50px; 
 
} 
 
.right-arrow:after { 
 
\t content: ''; 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 100%; 
 
\t top: 0; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 25px solid transparent; 
 
\t border-right: 25px solid transparent; 
 
\t border-bottom: 25px solid transparent; 
 
\t border-left: 25px solid orange; 
 
} 
 
.content{ 
 
    flex-grow:1; 
 
    flex-shrink:0; 
 
    background-color:green; 
 
    height:50px; 
 
    padding-left:50px; 
 
}

<div class="container"> 
 
<div class="right-arrow">Div with Right Arrow</div> 
 
<div class="content"> 
 
    Here you can put the links 
 
    </div> 
 
    </div>

Answer 2

希望這就夠了;

HTML：

<div id="a"> 
    <div id="b"></div> 
    <div id="c"> 
     <div id="d"> 
      <ul> 
       <li>Ford</li> 
       <li>Ford</li> 
       <li>Ford</li> 
       <li>Ford</li> 
      </ul> 
     </div> 
     <div id="e"> 
      <ul> 
       <li>Ford</li> 
       <li>Ford</li> 
       <li>Ford</li> 
       <li>Ford</li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS：

#a{ 
    width: 849px; 
    height: 120px; 
    border: 3px solid #199ae2; 
} 
#b{ 
    width: 240px; 
    height: 100%; 
    background: #199ae2; 
    display: inline-block 
} 
#b::after{ 
    content: ""; 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-left: 90px solid #199ae2; 
    position: absolute; 
    left: 251px; 
} 
#c{ 
    display: inline-block; 
    width: 510px; 
    height: 120px; 
    position: absolute; 
    left: 350px; 
} 
#d{ 
    width: 100%; 
    height: 60px; 
} 
#d > ul{ 
    padding-bottom: 18px; 
    border-bottom: 3px solid #199ae2; 
} 
#d > ul > li{ 
    display: inline-block; 
    font-family: arial; 
    font-size: 21px; 
    padding: 0px 30px 0px; 
    border-right: 2px solid; 
} 
#e > ul{ 
    margin-top: 3px; 
} 
#e > ul > li{ 
    display: inline-block; 
    font-family: arial; 
    font-size: 21px; 
    padding: 0px 30px 0px; 
    border-right: 2px solid; 
} 

小提琴：https://jsfiddle.net/w78u7465/1/

請知道，StackOverflow不是一種編程服務。我們在這裏可以幫助您解決在實際開發您的網站時遇到的任何問題。我這樣做的唯一原因是因爲它是聖誕節，我感覺大方:-)

在未來，考慮學習HTML & CSS自己，編寫您自己的網站。