Question

嘿，我试图用引导程序设置一个简单的画廊 - 我把画廊放在无序列表的行中。然而，行开始被推到身体的折叠以下。

我很好奇的两件事： 1.在使用引导列约定时，如何将所有库项目（列表项）保留在同一行中。 2.我当前的html布局有什么问题 - 为什么它会将内容推到首位，而不是将它们放在体内。

这是代码......

＆＃13;

html,
body {

    width: 100%;
    height: 100%;
    min-height: 560px;

}

body {

    position: relative;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
    font-size: 100%;

}

header {

    width: 100%;
    z-index: 10;
    background: #212121;
    padding: 40px 0 21px 0;

    .wrapper {

        overflow: visible;
        height: 40px;
        width: 940px;
        margin: 0 auto;

        a {

            color: #fff;
            text-decoration: none;

        }

        #logo {

            text-indent: 100%;
            padding-left: 20px;
            white-space: nowrap;
            overflow: hidden;
            width: 120px;
            height: 20px;
            margin: 0;
            float: left;
            background: url("../images/maark-logo.png") no-repeat 20px 0px / 100px 20px;

        }


        .dd-menu {

            width: 40%;
            float: right;

        }


    }

}

.main-container {

    height: calc(100% - 101px);
    background: #0381e2;
}

.main-container,
.row,
ul {
    border: 0;
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    display: block;
    text-align: center;
}

.gallery-list-item {
    height: 400px;
    background: black;
    border-radius: 6px;
    float: none;
    display: inline-block;
    margin: 40px 15px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="css/app.css">
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>

    <header>
        <div class="wrapper">
            <a href="" title="">
                <h1 id="logo">Maark</h1>
            </a>
            <nav>
                <select id="pages-menu" class="form-control dd-menu input-sm">
                    <option value="http://localhost:3000/submission-landing">page one</option>
                    <option value="http://localhost:3000/submission-narrative">page two</option>
                    <option value="http://localhost:3000/submission-final-details">page three</option>
                    <option value="http://localhost:3000/management-home-dashboard">page four</option>
                    <option value="http://localhost:3000/management-landing">page five</option>
                    <option value="http://localhost:3000/management-landing">page five</option>
                </select>
            </nav>
        </div>
    </header>

    <div class="main-container container-full">
        <ul class="row">
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
        </ul>
        <ul class="row">
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
        </ul>
        <ul class="row">
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
            <li class="gallery-list-item col-sm-3">
              <div class="page-thumbnail"></div>
            </li>
        </ul>

    </div>


</body>
</html>

＆＃13;

Answer 1

我不确定您的身体折叠是什么意思，但如果您的意思是为什么您的背景颜色不会延伸到您的所有列表项目，那么您的行

height: calc(100% - 101px);

主容器中的

导致问题。

对于您的行，您不需要将每个列表项放在自己的行中。你可以将它们全部放在一起并具有相同的外观。由于包含行是12，因此4行3将与它们各自在自己的行中相同，并且可以节省一些额外的输入。

更新了pen

Bootstrap将图片库内容推送到正文下方

1 个答案: