如何像其他页面一样在此页面上获得边距?

时间:2014-11-01 22:11:38

标签: html css twitter-bootstrap

我正在为我的高中机器人团队开发一个网站,我想像其他网页一样为这一页创建边距,但是当我将边距设置为自动或任何有价值时,它什么也没做。我正在使用bootstrap。

页面我想要利润 - http://www.robotichive3774.com/Our%20Coach/

<div class="jumbotron">
  <h1>Our Coach, Marie Aloia</h1>
  <p>Here you'll learn a little bit about our team coach.</p>
</div>
<div class="panel panel-default">
  <div class="panel-body" id="page-info">
    <ul class="List_Acc"> <!-- main list -->
        <h2>List of Accomplishments</h2>
    </ul> <!-- end main-list -->
<ul class="list-group"><!-- main list -->
        <h2>Colleges/degrees</h2>
            <li class="list-group-item">Montclair University</li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">Math/Physics</li>
                </ul> <!-- end sub-list -->
            <li class="list-group-item">New Jersey Institute of Technology</li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">Chemical Engineering</li>
                </ul> <!-- end sub-list -->
    </ul> <!-- end main-list -->
    <ul class="list-group"> <!-- main list -->
        <h2>Prior Work History</h2> 
            <li class="list-group-item">Exxon Mobil Research and Development-20 years</li>
            <li class="list-group-item">5 years at various High Technology Firms</li>
    </ul> <!-- end main-list -->
    <ul class="list-group"> <!-- main list -->
        <h2>Memorable Students and their Accomplishments</h2>
            <li class="list-group-item"><h4>Eric Delgado (Yale University)</h4></li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">Science Talent Search Finalist</li>
                </ul> <!-- end sub-list -->
            <li class="list-group-item"><h4>Dan Borowski (Rutgers University)</h4></li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">Google Computer Science Summer Institute</li>
                </ul> <!-- end sub-list -->
            <li class="list-group-item"><h4>Sharif Abdelbaky (University of Pittsburgh)</h4></li>
                <ul class="list-group"> <!-- sub list -->
                    <li class="list-group-item">NASA Robotics Intern-ship</li>
                    <li class="list-group-item">Google Computer Science Summer Institute</li>
                </ul> <!-- end sub-list -->
            <li class="list-group-item"><h4>Gemma David (Rutgers University)</h4></li>
                <ul class="list-group"> <!-- sub-list -->
                    <li class="list-group-item">Founder of FTC Team 3774</li>
                    <li class="list-group-item">Attended New Jersey Governors School</li>
                </ul> <!-- end sub-list -->
    </ul> <!-- end main-list -->
    <ul class="list-group">
        <h2>Organizations</h2>
            <li class="list-group-item">Society for Women Engineers</li>
    </ul>
  </div>
</div>


</body>
</html>

CSS

.banner
{
float: bottom;
}

#top-jumbotron
 {
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
    margin-bottom: 0;
}

#page-info
{
margin-left: auto;
margin-right: auto;
}

body
{
background-image: url("robots2.png");
}

1 个答案:

答案 0 :(得分:1)

将您想要位于页面中间的代码(即带边距)包装在容器中:

<div class="container">
    your code in here...
</div>

引导程序中的容器是使内容位于页面中间的部分

您可以在打开的身体标签后直接放置容器的开口,然后在

之前关闭div