如何将Bootstrap（网格系统）应用于div？

时间：2018-05-23 11:55:38

标签： asp.net twitter-bootstrap

我正在设计Bootstrap表单。我想让阻止响应。

enter image description here

代码：

 <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标签以使其变得响应。

3 个答案:

答案 0 :(得分：0)

首先添加bootstrap 

<!-- 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以获取有关Bootstrap的更多信息，并按您希望的方式自定义代码

答案 1 :(得分：0)

此代码可能有所帮助：

<div class="container img-responsive">
  <div class="row">
    <div class="col-sm-6"><a href=xyz ><img src=abc></a></div>
    <div class="col-sm-6"><a href=xyz ><img src=abc></a></div>
  </div>
  <div class="row">
    <div class="col-sm-6"><a href=xyz ><img src=abc></a></div>
    <div class="col-sm-6"><a href=xyz ><img src=abc></a></div>
  </div>
</div>

答案 2 :(得分：0)

我希望这是你想要的：

<!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/

相关问题
最新问题