2017-07-03 50 views
0

interfereing採取以下codepen:https://codepen.io/anon/pen/Xgqjyq引導進口與<figure>放置

的數字

h2 { 
 
\t color: #111; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-size: 20px; 
 
\t font-weight: bold; 
 
\t text-align: center; 
 
} 
 

 
.content { 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    text-align: center; 
 
    line-height: .75em; 
 
} 
 

 
.image-cropper { 
 
    width: 20%; 
 
    height: 5%; 
 
    position: relative; 
 
    border: 0px solid white; 
 
    -webkit-border-radius: 50px; 
 
    -moz-border-radius: 50px; 
 
    border-radius: 500px; 
 
    overflow:hidden; 
 
\t margin:0 auto; 
 
} 
 

 
.info { 
 
\t color: black; 
 
} 
 

 

 
.interest { 
 
\t width:4em; 
 
\t height:4em; 
 
\t padding-bottom: .2em; \t 
 
} 
 

 
figure { 
 
    display: inline-block; 
 
\t width: 8em; 
 
} 
 

 
figcaption { 
 
\t font-family: 'Helvetica Neue', sans-serif; 
 
\t font-size: 17px; 
 
\t font-weight: bold; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<body> 
 
\t \t <nav class="navbar navbar-default"> 
 
\t \t <div class="container-fluid"> 
 
\t \t \t <div class="navbar-header"> 
 
\t \t \t <a class="navbar-brand" href="#"> 
 
\t \t \t \t header 
 
\t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    </nav> 
 
\t \t <div class="content"> 
 
\t \t \t <div> 
 
\t \t \t \t \t <h2>title</h2> 
 
\t \t \t \t \t <figure> 
 
\t \t \t \t \t \t <img class="interest" src="" alt="pic"/> 
 
\t \t \t \t \t \t <figcaption>caption</figcaption> 
 
\t \t \t \t \t </figure> 
 
\t \t \t \t \t <figure> 
 
\t \t \t \t \t \t <img class="interest" src="" alt="pic"/> \t 
 
\t \t \t \t \t \t <figcaption>caption</figcaption> 
 
\t \t \t \t \t </figure> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body>

兩者都留在自己的線對齊。但是,如果您刪除HTML頂部的引導樣式鏈接,則它們會像我想要的那樣位於一行中間。

但我需要引導程序的標題格式。

有什麼辦法解決這個問題嗎?我試着用nav元素下載一個自定義的Bootstrap,但是這並沒有解決問題。

回答

0

添加在CSS:

figure{ 
float:left; 
} 

享受!