我有以下代码。
<div class="row no-gutters">
<div class="col-6 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;">
placeholder
<i class="fa fa-caret-right fa-xs"></i>
</div>
<div class="col-6 text-uppercase font-weight-lighter">placeholder</div>
</div>
我对这段代码有两个问题:
我如何将文本(占位符)与图标对齐?
如何在两段文字和图标之间增加间距?
(所有代码都在卡块内)
我使用的是HTML的旧版本(在HTML5之前,并且我不能使用CSS。 (这是我第一次真正地研究HTML,如果我的代码很糟糕,我深表歉意)
谢谢你!
您在代码中使用bootstrap类,如果您在html中插入bootstrap文件,则可以将这些样式用于class。
其中属性是以下之一:
m-对于设置边距的类p-用于设置填充的类其中边是以下之一:
t-对于设置margin-top或padding-top的类b-对于设置margin-bottom或padding-bottom的类l-对于设置margin-left或padding-left的类r-对于设置margin-right或padding-right的类x-对于同时设置* -left和* -right的类y-对于同时设置* -top和* -bottom的类空白-对于在元素的所有4个面上设置边距或填充的类
您可以使用引导程序进行对齐和间隔:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap spacing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Make the image fully responsive */
</style>
</head>
<body>
<div class="row no-gutters">
<div class="col-3 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;">
placeholder
</div>
<div class="col-3 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;">
</div>
<div class="col-3">
<i class="fa fa-caret-right fa-xs"></i>
</div>
<div class="col-3 text-uppercase font-weight-lighter"> placeholder </div>
</div>
</body>
</html>