Question

＆＃13;

.rowHeight{
    height: 100px;
}

.padding-0
{
    padding-right: 0px;
    paddig-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
}


.cart{
    height:42px;
    width: 42px;
}

＆＃13;

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>S-MART | WELCOME</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="syles/style.css">
</head>
<body>
    <div class="container">
        <div class="row rowHeight justify-content-center">
            <div class="col-md-10 padding-0">
                <h1 class="header">S-MART</h1>
            </div>
            <div class="col-md-2 padding-0">
                <img src="images/shopping_cart_PNG58.png" class="cart" alt="Shoppingcart" align="center"> </img>
            </div>
    </div>

    <script src="js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

我想删除标题和图像之间的空格。应该看起来像＆＃34; S-MART（IMAGE）＆＃34;。我是新手，所以一直面临类似的问题，一些建议将不胜感激。

Answer 1

你可以做的一件事（通常将div元素放在另一个上面）是给它们float：left属性并设置它们的宽度，使它们彼此接近。例如，为每个人分配一个id（我选择了myH1和myH1_pic）然后在css文件中给出相应的属性（你可能想要编辑宽度）：

<div class="row rowHeight justify-content-center">
    <div class="col-md-10 padding-0 " id="myH1">
       <h1 class="header">S-MART</h1>
    </div>
       <div class="col-md-2 padding-0 child" id="myH1_pic">
           <img src="images/shopping_cart_PNG58.png" class="cart" alt="Shoppingcart" align="center"> </img>
       </div>
  </div>

和css：

#myH1{
    width: 150px;
    float: left;}

#myH1_pic{
    width: 200px;
    float:left;
}

顺便说一下，你错过了一个结束div标签。

Answer 2

H1标签包含默认保证金。你只需要删除它。希望这会对你有所帮助。

＆＃13;

.rowHeight{
    height: 100px;
}

.padding-0
{
    padding-right: 0px;
    paddig-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
}
h1{
     margin : 0px;
}

.cart{
    height:42px;
    width: 42px;
}

＆＃13;

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>S-MART | WELCOME</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="syles/style.css">
</head>
<body>
    <div class="container">
        <div class="row rowHeight justify-content-center">
            <div class="col-md-10 padding-0">
                <h1 class="header">S-MART</h1>
            </div>
            <div class="col-md-2 padding-0">
                <img src="images/shopping_cart_PNG58.png" class="cart" alt="Shoppingcart" align="center"> </img>
            </div>
       </div>
    </div>

    <script src="js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

如何删除BS4中标题和列之间的空格

2 个答案: