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

时间：2018-04-21 08:52:17

标签： html css twitter-bootstrap

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: Lawal@eventor.com </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 | info@eventor.com | 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>

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

1 个答案:

答案 0 :(得分：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> lawalhardcore@eventor.com</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>info@eventor.com</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>
相关问题
最新问题