Question

采取以下代码：https://codepen.io/anon/pen/Xgqjyq

h2 { 
	color: #111; 
	font-family: 'Open Sans', sans-serif; 
	font-size: 20px; 
	font-weight: bold; 
	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;
	margin:0 auto;
}

.info {
	color: black;
}


.interest {
	width:4em; 
	height:4em;
	padding-bottom: .2em;	
}

figure {
    display: inline-block;
	width: 8em;
}

figcaption {
	font-family: 'Helvetica Neue', sans-serif; 
	font-size: 17px;
	font-weight: bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
		<nav class="navbar navbar-default">
		  <div class="container-fluid">
			<div class="navbar-header">
			  <a class="navbar-brand" href="#">
				header
			  </a>
			</div>
		  </div>
  </nav>
		<div class="content">
			<div>
					<h2>title</h2>
					<figure>
						<img class="interest" src="" alt="pic"/>
						<figcaption>caption</figcaption>
					</figure>
					<figure>
						<img class="interest" src="" alt="pic"/>	
						<figcaption>caption</figcaption>
					</figure>
			</div>
		</div>
	</body>

这两个数字都是自己对齐的。但是，如果删除HTML顶部的引导样式链接，它们会像我想要的那样集中在一行上。

但我需要引导程序来进行标题格式化。

有什么方法可以解决这个问题吗？我尝试只使用nav元素下载自定义Bootstrap，但这并没有解决问题。

Answer 1

添加CSS：

figure{
float:left;
}

享受！

Bootstrap导入会干扰<figure>放置

1 个答案: