如何让列使用bootstrap跨越多行？

问题描述 投票：-1回答：1

enter image description here

我想将上面的模型转换为HTML和CSS，但是通过使图像跨越2行来努力使其工作。

我试过通过我在网上找到的一些代码来实现它，但它仍然没有响应。

这就是我到目前为止所做的。

enter image description here

这是我的代码：

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 1px;
  /*background-color: #2196F3;*/ 

}
.grid-container > div {
  /*background-color: rgba(255, 255, 255, 0.8);*/ 
  /*text-align: center;*/ 

  font-size: 25px;
}

.fa {
  padding: 15px;
  font-size: 15px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

</style>
</head>
<body>


<div class="grid-container">
  <!--div class="item1">Header</div-->
  <div class="item2" style="width: 10px"><img src="" ></div>
  <div class="item3" style="margin-left: 80px;">

  <p style="font-size: 15px; margin-top: 3px">LAWAL HARDCORE <br> 

  UI/UX | Graphics Designer. </p>

<div style="font-size: 15px;"> Email: [email protected] </div>   

  </div>


  <!--div class="item4">Right</div-->
  <div class="item5" style="background-color:#4f2684; margin-right: 100px; margin-left: 80px; color: white; width: 600px;">

  <div style="font-size: 18px"> Cranium One, Towry Close, Victoria Island, Lagos. 

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a> 
 </div> 

  <div style="font-size: 18px"> 08023444444 | [email protected] | www.eventor.com </div> 

  </div>
</div>

<div> disclaimers: This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system.</div>
</body>
</html>

请有人指导我通过吗？谢谢

html css twitter-bootstrap
1个回答
1
投票

试试这个enter image description here jsfiddle Code

<body>

<div class="container-fluid">

  <div class="row">
    <div class="col-sm-2" style="background-color:lavender; margin: 0px;">


    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/b9/Terminator-2-judgement-day.jpg/250px-Terminator-2-judgement-day.jpg" width="250" height="250">

    </div>
    <div class="col-sm-10" style="background-color:lavenderblush;">
        <div class="col-sm-12" style="background-color:white;">
            <h1 style="color:#512586;">LAWAL HARDCORE</h1>
            <h3 style="color:#;">UI/UX  Designer | Graphics Designer</h3>
            <p> <b>EMAIL:</b> [email protected]</p>

        </div>
        <div class="col-sm-12" style="background-color:#512586; color: white; height: 120px;">
            <div class="cols-12">
            <div class="col-sm-6">
                <h4>Craninum One, Towry Close,</h4>

                <h4>Adeola  Odeku,  Victoria Island, Lagos.</h4>
            </div>
            <div class="col-sm-6" style="padding: 25px; height: 68px; text-align: center;">

                <button type="button" class="btn btn-default" style="border-radius: 50%;">
                    <span class="fa fa-facebook" style="color: #512586"></span>
                  </button>
                  <button type="button" class="btn btn-default" style="border-radius: 50%;">
                    <span class="fa fa-twitter" style="color: #512586"></span>
                  </button>
                  <button type="button" class="btn btn-default" style="border-radius: 50%;">
                    <span class="fa fa-instagram" style="color: #512586"></span>
                  </button>

                  <button type="button" class="btn btn-default" style="border-radius: 50%;">
                    <span class="fa fa-linkedin" style="color: #512586"></span>
                  </button>
            </div>


            </div>
            <div class="cols-12" >
            <div class="col-sm-2">
            <p>08111 0832 161</p>
            </div>  
            <span class="col-sm-1">|</span>
            <div class="col-sm-2">
            <p>[email protected]</p> 
            </div> 
            <span class="col-sm-1">|</span>
            <div class="col-sm-2">
            <p>www.eventor.com</p>
            </div> 

        </div>

    </div>


  </div>
  <div class="col-sm-12" style="background-color:white;">
        <div> DISCLAIMER: This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system.</div>
    </div>
</div>


</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.