html - 控制一段高度

Question

我正在制作自己的钓鱼网站:) 但我真的很怀疑如何构建我的某些部分。下面的图片显示了我对这一部分的看法。在那个特定的部分，我有一个 100% 的宽度。但是如果我在这些部分设置高度和填充，它会影响我所有其他的 col-12。那么如何在特定部分设置高度、填充和边距呢？

我希望我的页面如何:

我的网站:

HTML:

<!-- Main & Nav -->
    <div class="main-header" role="main">
        <nav class="global-nav">
            <ul class="title-area">
                <li>sdf</li>
            </ul>
            <ul>
                <li>Home</li>
            </ul>

        </nav>
    </div>
    <!-- Here is the section I would like to style -->
    <div class="row">
        <div class="col col-12">
            <h2>Favorite Flies</h2>
        </div>
    </div>
    <!-- Flies -->
    <div class="row">
        <div class="col-md-6">
            <ul id="filters" class="clearfix">
                <li><span class="filter active" data-filter="app card icon logo web">Rated</span></li>
                <li><span class="filter" data-filter="app">Sea</span></li>
                <li><span class="filter" data-filter="card">Lake</span></li>
                <li><span class="filter" data-filter="icon">Autaum</span></li>
                <li><span class="filter" data-filter="logo">Summer</span></li>
                <li><span class="filter" data-filter="web">Winter</span></li>
            </ul>
        </div>
        </div>
    </div>
    <div class="container">
        <div class="row  mar-b-30">
        <div id="portfoliolist">
            <div class="col-md-12">
            <div class="portfolio logo" data-cat="logo">
                <div class="portfolio-wrapper">
                    <div class="portfolio-hover">
                        <div class="image-caption">
                            <a href="img/portfolios/logo/5.jpg" class="label magnefig label-info icon" data-toggle="tooltip" data-placement="left" title="Zoom"><i class="fa fa-eye"></i></a>
                            <a href="blog-detail.html" class="label label-info icon" data-toggle="tooltip" data-placement="top" title="Details"><i class="fa fa-link"></i></a>


                        </div>
                        <img src="img/fly/barbine.jpg" alt="" />

                    </div>
                </div>
            </div>

            <div class="portfolio app" data-cat="app">
                <div class="portfolio-wrapper">
                    <div class="portfolio-hover">
                        <div class="image-caption">
                            <a href="img/portfolios/app/3.jpg" class="label magnefig label-info icon" data-toggle="tooltip" data-placement="left" title="Zoom"><i class="fa fa-eye"></i></a>
                            <a href="blog-detail.html" class="label label-info icon" data-toggle="tooltip" data-placement="top" title="Details"><i class="fa fa-link"></i></a>


                        </div>
                        <img src="img/fly/black_dog.jpg" alt="" />
                    </div>
                </div>
            </div>

CSS:

    body {
        color: #797979;
        font-family: 'roboto'; 
        font-weight: 300;
        padding: 0px !important;
        margin: 0px !important;
        font-size: 14px;
    }
h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'roboto'; 
        font-weight: 300;
        text-align: center;
    }
    a,
    a:hover,
    a:focus {
        text-decoration: none;
        outline: none;
    }
    ::selection {
        background: #48cfad;
        color: #fff;
    }
    ::-moz-selection {
        background: #48cfad;
        color: #fff;
    }


        #map {
                width: 100%;
                height: 300px;
              }

        .global-nav {
            overflow: hidden;
            margin-bottom: 0px;
            height: 55px;
            background: #333;
        }
        .main-header {
            background: url(../img/bg_1.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            height: 700px;
            overflow: hidden;
        }

        /* Rows */
        .row{
          margin-left:-15px;
          margin-right:-15px;
         }
        .row:after{
          content:'';
          display:block;
          clear:both
        }
        /* General properties of columns */
        .col{
          padding: 0rem;
          float:left; 
        }

        /* Column Definition */
        .col-1{
          width:8.33333333%
        }

        .col-2{
          width:16.66666667%
        }

        .col-3{
          width:25%
        }

        .col-4{
          width:33.33333333%
        }

        .col-5{
          width:14.666667%
        }

        .col-6{
          width:50%;
        }

        .col-7{
          width:58.33333333%
        }

        .col-8{
          width:66.6666667%
        }

        .col-9{
          width:75%
        }

        .col-10{
          width:83.33333333%
        }

        .col-11{
          width:91.6666666%
        }
        .col-12{
          width:100%;
        }

Answer 1

只需向您想要为其设置高度、填充和边距的“div”添加一个类或一个 id。

然后跳转到您的 CSS 并使用新创建的类名或 ID 来设置高度、填充和边距。

代码:

.colPadding {
  padding: 20px;
}

<div class="row">
  <div class="col col-12 colPadding">
    <h2>Favorite Flies</h2> 
  </div>
</div>