gpt4 book ai didi

html - Bootstrap 导入干扰
放置

转载 作者:行者123 更新时间:2023-11-28 03:27:52 24 4
gpt4 key购买 nike

采用以下代码笔: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 顶部的 Bootstrap 样式链接,它们就会像我希望的那样集中在一行中。

但是我需要 Bootstrap 来格式化标题。

有什么办法可以解决这个问题吗?我尝试下载仅包含导航元素的自定义 Bootstrap,但这并没有解决问题。

最佳答案

在 CSS 中添加:

figure{
float:left;
}

尽情享受吧!

关于html - Bootstrap 导入干扰 <figure> 放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44889619/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com