如何将Bootstrap (网格系统)应用到div？

Question

我正在设计Bootstrap表单。我想让代码块有响应能力。

​

​

代码：

 <div class="main_txt">
            <div class="main_row_sep" >
                <div class="main_service main_auto" >
                    <h4>
                        <a title="Automotive" href="searchcat1.aspx?cat=Automotive">Automotive</a></h4>
                    <p>
                        <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Auto Spare Parts">Auto 
                        Spare Parts</a>
                         <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Commercial Vehicles">
                        Commercial Vehicles</a> 
                         <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Oil value Lubricants">
                        Oil value Lubricants</a>
                          <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Tyres and Batteries">
                        Tyres and Batteries</a> 
                          <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Automotive Tools">
                        Automotive Tools</a> 
                          <span class="right"><a href="searchcat1.aspx?cat=Automotive">more ...</a></span></p>
                </div>
                <div class="main_service main_build" >
                    <h4>
                        <a href="searchcat1.aspx?cat=Building and Interiors">Building and Interiors</a></h4>
                    <p>
                        <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Aluminum and Steel Profiles">
                        Aluminum and Steel Profiles</a> 
                        <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Bathroom and Kitchen Equipment">
                        Bathroom and Kitchen Equipment</a> 
                        <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Cables and Electrical">
                        Cables and Electrical</a>
                         <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Hardware and Tools">
                        Hardware and Tools</a>
                          <span class="right"><a href="searchcat1.aspx?cat=Building and Interiors">more 
                        ...</a></span></p>
                </div>
            </div>
</div>

CSS：

  .main_service {

    width:254px;
        height:136px;
        float:left;
        padding:20px 20px 0 90px;
    }


    .main_auto      {background:url(images/category/auto.gif) no-repeat;}
    .main_build     {background:url(images/category/build.gif) no-repeat;}

    .main_row_sep {
        width:100%;


    }

我不明白如何将grid system应用于div标签，使其具有响应性。

Answer 1

首先添加引导

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

然后用下面的代码替换您的HTML代码

<div class="container">
        <div class="row" >
            <div class="main_auto col-md-6" >
                <h4>
                    <a title="Automotive" href="searchcat1.aspx?cat=Automotive">Automotive</a></h4>
                <p>
                    <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Auto Spare Parts">Auto 
                    Spare Parts</a>
                     <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Commercial Vehicles">
                    Commercial Vehicles</a> 
                     <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Oil value Lubricants">
                    Oil value Lubricants</a>
                      <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Tyres and Batteries">
                    Tyres and Batteries</a> 
                      <a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Automotive Tools">
                    Automotive Tools</a> 
                      <span class="right"><a href="searchcat1.aspx?cat=Automotive">more ...</a></span></p>
            </div>
            <div class="main_build col-md-6" >
                <h4>
                    <a href="searchcat1.aspx?cat=Building and Interiors">Building and Interiors</a></h4>
                <p>
                    <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Aluminum and Steel Profiles">
                    Aluminum and Steel Profiles</a> 
                    <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Bathroom and Kitchen Equipment">
                    Bathroom and Kitchen Equipment</a> 
                    <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Cables and Electrical">
                    Cables and Electrical</a>
                     <a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Hardware and Tools">
                    Hardware and Tools</a>
                      <span class="right"><a href="searchcat1.aspx?cat=Building and Interiors">more 
                    ...</a></span></p>
            </div>
        </div>
</div>

您可以看到添加了3个类( container、row、col md-6)下面是查看结果https://jsfiddle.net/3ypn1g9k/的链接

您可以随时访问https://getbootstrap.com以获取有关引导程序的更多信息，并以所需的方式自定义代码

Answer 2

我希望这是你想要的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
<style>
img{
  border:5px solid grey;
  width:100%;
  height:100%;
}</style>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-6"><a href=xyz ><img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png"></a></div>
    <div class="col-6"><a href=xyz ><img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png"></a></div>
  </div>
  <div class="row">
    <div class="col-6"><a href=xyz ><img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png"></a></div>
    <div class="col-6"><a href=xyz ><img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-social-logo.png"></a></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

查看：https://jsfiddle.net/8pn27vhL/5/