html bootstrap无法对齐中心

时间：2017-12-02 20:32:51

标签： html css twitter-bootstrap alignment

嘿伙计们，我是Stackoverflow的新手，我已经用HTML编写了5个多月了。我目前正在使用Boostrap。我目前正在尝试将this网站修改为我喜欢的方式。但我似乎无法正确对齐事物，如this image所示。如您所见，左侧有更多空间，右侧空间更小。

我查看了其他类似问题的Stackoverflow帖子，我查看了CSS文件并尝试查找与margin有关的任何内容并修改它但我无法使其工作，所以我的部分正确居中。我正在使用row和span12。

基本上我正在尝试将部分（<section id="projects">）与页面中心对齐

我希望有人可以帮助我。 P.S在哪里是网站的下载链接

http://www.alessioatzeni.com/blog/brushed-template/

非常感谢你:)

更新1 这是我的工作div。我没有修改过css 

<!-- Our Work Section -->
<div id="work" class="page">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="title-page-less-margin">
                    <h2 class="title">Our Work</h2>
                    <h3 class="title-description">Check Out Our Projects on <a href="#">Dribbble</a>.</h3>

                </div>
            </div>
        </div>
        <!-- Portfolio Projects -->

        <div class="span12">
            <div class="row">

                <div class="title-page-less-margin">
                    <nav id="options" class="work-nav">

                        <ul id="filters" class="option-set" data-option-key="filter">
                            <a href="#filter" data-option-value="*" class="selected">All Projects</a>
                            <a href="#filter" data-option-value=".design">Design</a>
                            <a href="#filter" data-option-value=".photography">Photography</a><
                            <a href="#filter" data-option-value=".video">Video</a>
                        </ul>

                    </nav>
                </div>


                <section id="projects">
                    <ul id="thumbs">

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 design">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">

                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-plus"></span>
                            </a>

                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis. hihihi">
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 design">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/image-02-full.jpg"></a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-02.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 photography">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Mountains" href="_include/img/work/full/image-03-full.jpg"></a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-03.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 video">
                            <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                            <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/51460511"></a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-08.jpg" alt="Video">
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 photography">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Sea" href="_include/img/work/full/image-04-full.jpg"></a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-04.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 photography">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Clouds" href="_include/img/work/full/image-05-full.jpg"></a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-05.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 video">
                            <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                            <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/50834315"></a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-09.jpg" alt="Video">
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 design">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Dark" href="_include/img/work/full/image-06-full.jpg"></a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-06.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 design">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Beach" href="_include/img/work/full/image-07-full.jpg"></a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/image-07.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                        </li>
                        <!-- End Item Project -->
                    </ul>
                </section>
            </div>
        </div>

        <!-- End Portfolio Projects -->


        <!-- End Title Page -->
    </div>
</div>

1 个答案:

答案 0 :(得分：0)

将整个<div class="container">替换为以下代码：
ps：我知道你不应该用HTML编写CSS但是我修复它的方式没有在我的电脑上使用CSS，你可以稍后将其移动到样式表。 

<div class="container">
    <!-- Title Page -->
    <div class="row" style="
       text-align: center;
       padding-bottom: 30px;
       ">
        <h2 class="title">Our Work</h2>
        <h3 class="title-description">Check Out Our Projects on <a href="#">Dribbble</a>.</h3>
        <div class="title-page-less-margin">
            <nav id="options" class="work-nav">

                <ul id="filters" class="option-set" data-option-key="filter">
                    <a href="#filter" data-option-value="*" class="selected">All Projects</a>
                    <a href="#filter" data-option-value=".design">Design</a>
                    <a href="#filter" data-option-value=".photography">Photography</a>&lt;
                    <a href="#filter" data-option-value=".video">Video</a>
                </ul>

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

    <div class="row">

        <section id="projects">
            <ul id="thumbs">

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 design">
                    <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">

                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-plus"></span>
                            </a>

                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis. hihihi">
                </li>
                <!-- End Item Project -->

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 design">
                    <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/image-02-full.jpg"></a>
                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-02.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 photography">
                    <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Mountains" href="_include/img/work/full/image-03-full.jpg"></a>
                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-03.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 video">
                    <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                    <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/51460511"></a>
                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-08.jpg" alt="Video">
                </li>
                <!-- End Item Project -->

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 photography">
                    <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Sea" href="_include/img/work/full/image-04-full.jpg"></a>
                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-04.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 photography">
                    <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Clouds" href="_include/img/work/full/image-05-full.jpg"></a>
                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-05.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 video">
                    <!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
                    <a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/50834315"></a>
                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-09.jpg" alt="Video">
                </li>
                <!-- End Item Project -->

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 design">
                    <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Dark" href="_include/img/work/full/image-06-full.jpg"></a>
                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-06.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->

                <!-- Item Project and Filter Name -->
                <li class="item-thumbs span3 design">
                    <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                    <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Beach" href="_include/img/work/full/image-07-full.jpg"></a>
                    <!-- Thumb Image and Description -->
                    <img src="_include/img/work/thumbs/image-07.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                </li>
                <!-- End Item Project -->
            </ul>
        </section>

    </div>
</div>

应该是这样的： enter image description here

相关问题
最新问题