Question

我想把中心放好;这是我的代码和截图。我添加的井应该出现在中间。我该怎么办？这是我正在使用的页面的完整正文。我是Bootstrap CSS的新手。

<html>
<head>
  <title>Farmer Point</title>
  <meta charset ="utf-8">
  <link rel="icon" type="png" href="img/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
 <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>

  <header>
        <nav class="navbar navbar-default navbar-fixed-top"> 

                <div class="container-fluid">

                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> <!--creating 3-line button-->
                        <span class="icon-bar"></span>
                      </button>

                          <a href="/" class="navbar-brand">Farmer's Point</a>
                    </div>

                <!--Menu Items-->

                <div class="collapse navbar-collapse" id="mainNavBar">

                       <ul class="nav navbar-nav  navbar-right">
                          <li><a href="/">Home</a></li>
                          <li><a href="/farmerPoint">Point List</a></li>
                          <li><a href="/CropList">Crop List</a></li>
                          <li><a href="/AboutUs">About Us</a></li>
                          <li><a href="/SiteAdmin">Site Admin</a></li>
                          <li><a href="/ContactUs">Contact Us</a></li>
                          <li><a href="/login">Log in</a></li>
                       </ul>
                  </div>

                </div>

        </nav>
</header>
<div class="TopSpace"></div>


<!-- the well-->


<div class="container" id="profile">

        <div class="col-md-6">
            <div class="col-md-6 col-md-offset-3">
            <div class="well well-sm">
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <img src="img/tawsif.jpg" alt="" class="img-rounded img-responsive" />
                    </div>
                    <div class="col-sm-6 col-md-8">
                        <h4>
                            Md. Tawsif Ul Karim</h4>
                        <small><cite title="Dhaka, Bangladesh">Dhaka, Bangladesh <i class="glyphicon glyphicon-map-marker">
                        </i></cite></small>
                        <p>
                            <i class="glyphicon glyphicon-envelope"></i>tawsif.karim@gmail.com
                            <br />
                            <i class="glyphicon glyphicon-globe"></i><a href="#">www.soemthing.com</a>
                            <br />
                            <i class="glyphicon glyphicon-gift"></i>June 08, 1992</p>


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

<!--well ends-->

<div class="bottom-menu">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="bottom-links">
              <li> <a href="/">Home</a> </li>
              <li><a href="/farmerPoint">Point List</a></li>
              <li><a href="/CropList">Crop List</a></li>
              <li><a href="/AboutUs">About Us</a></li>
              <li><a href="/SiteAdmin">Site Admin</a></li>
              <li><a href="/ContactUs">Contact Us</a></li>

        </ul>
      </div>

    </div>
  </div>
</div>
</body>
</html>

Answer 1

只需将col-md-offset-3课程添加到div的父级.well div，如下所示：

<div class="container" id="profile" >
     <div class="col-md-6 col-md-offset-3"> <!--here-->
         <div class="well well-sm">
         ....
         </div>
     </div>
</div>

这会将div推向中等屏幕

的中心位置

<强> DEMO HERE

在Bootstrap CSS中实现中心化

1 个答案: