Html 在引导CSS中实现中心井_Html_Twitter Bootstrap_Css_Laravel 5.1

Html 在引导CSS中实现中心井

html twitter-bootstrap css

Html 在引导CSS中实现中心井,html,twitter-bootstrap,css,laravel-5.1,Html,Twitter Bootstrap,Css,Laravel 5.1,我想把井放在中心；这是我的代码和截图。我添加的井应该出现在中间。我该怎么办？这是我正在使用的页面的完整主体。我对引导CSS是新手 <html> <head> <title>Farmer Point</title> <meta charset ="utf-8"> <link rel="icon" type="png" href="img/favicon.png"> <meta name="viewport

我想把井放在中心；这是我的代码和截图。我添加的井应该出现在中间。我该怎么办？这是我正在使用的页面的完整主体。我对引导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>


农民点









Tawsif Ul Karim博士
孟加拉国达卡

塔维希夫。karim@gmail.com




1992年6月8日

只需将

col-md-offset-3

类添加到

div

中，该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
在中等屏幕上居中运行
您可以使用偏移量执行此操作。试着去寻找它。虽然它在中心，但问题是它挤压了井，井内的所有东西都流出了井@gurupasad，当你看到这个问题时？在什么类型的屏幕上？如果可能的话，你能发布一个截图吗？好的，我已经在我的问题@gurupasadc上添加了另一个截图，你能发布完整的body
code吗？包装在容器中的是什么？请看，在您的容器之后，还有一个
，这就是所有这些的原因。有必要吗？