时间戳

首页 > 解决方案 > 如何在 html css 中围绕媒体查询应用边框？

html - 如何在 html css 中围绕媒体查询应用边框？

问题描述

我想添加一个包含所有列的边框。如果我在所有元素周围使用div标签，它只会在标题周围形成边框，请帮忙。这是我使用的代码。

<!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="css/bootstrap.min.css">
 </head>
 <style type="text/css">

 </style>
 <body>
 <center>
  <h1>COFFEE,TEA,MILK</h1></center>

  <div class="col-md-4 col-sm-4 col-xs-4">
  <h2>A. Coffee</h2>
  <hr>
  <ol type="a" > 
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   </ol> 
   <img src="coffee.png">
   </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
    <h2>i. Tea</h2>
    <hr>
    <ol type="i">
   <li>Coffee</li>
    <li>Tea</li>
   <li>Milk</li>
    </ol>  <br>
   <img src="tea.jpg">
   </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
   <h2>1. Milk</h2>
    <hr>
   <ol type="1">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
    </ol> <br><br>
    <img src="milk.png" style=" height: 210px ; width: 210px;">
     </div>
    </body>
   </html>`

我想要的是：

在此处输入图像描述

标签： htmlcsstwitter-bootstrap

解决方案

要解决您的问题，您希望将列包装在与 h3 标题分开的 div 中。要从图片中获得所需的输出，这是解决它的代码：

<center>
  <h1>COFFEE,TEA,MILK</h1></center>
<div style="border: 2px solid black"> <- Add this here I did an inline style
  <div class="col-md-4 col-sm-4 col-xs-4">
  <h2>A. Coffee</h2>
  <hr>
  <ol type="a" > 
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   </ol> 
   <img src="#">
   </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
    <h2>i. Tea</h2>
    <hr>
    <ol type="i">
   <li>Coffee</li>
    <li>Tea</li>
   <li>Milk</li>
    </ol>  <br>
   <img src="#">
   </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
   <h2>1. Milk</h2>
    <hr>
   <ol type="1">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
    </ol> <br><br>
    <img src="#" style=" height: 210px ; width: 210px;">
     </div>
  </div>            <- Add closing here

推荐阅读