html - 我怎样才能将 div 置于带有 Bootstrap 类的其他 div 中？

Question

我正在使用 Bootstrap 和 SASS 开发响应式网页。

当屏幕尺寸较小时，如何使 ma​​intext div 和 Logo 居中？我尝试了多种选择，例如:

@media (max-width: 750px) {

    #maintext {
     margin-left: 0;
     margin-right: 0;

    }
}

我还尝试将 ma​​intext div 放在另一个 div centerhelper 中，并这样做:

@media (max-width: 750px) {
    .centerhelper {
        left: 50%;
        border: solid blue 2px;
    }

    #maintext {
     left: -50%;

    }
 }

但是 centerhelper div 的高度等于零，我为 centerhelper div 和 ma​​intext div 尝试了不同的“显示”CSS , 但没有成功。

这是我的 HTML 代码:

 <!-- NAVIGATION TOP -->
        <nav class="navbar my-navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">

     <!-- LOGO -->
              <a href="#" class="my-logo pull-left"><img src="img/Logo.png"></a> 
      <!-- LOGO -->          
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

            </div>
            <div id="navbar" class="collapse navbar-collapse pull-right">
              <ul class="nav navbar-nav">
                <li><a href="#"><button class="navbutton active">Home</button></a></li>
                <li><a href="#"><button class="navbutton">About</button></a></li>
                <li><a href="#"><button class="navbutton">Services</button></a></li>
                  <li><a href="#"><button class="navbutton">Portfolio</button></a></li>
                <li><a href="#"><button class="navbutton">Blog</button></a></li>
                <li><a href="#"><button class="navbutton lastbutton">Contact</button></a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>

        <!-- NAVIGATION TOP END -->
        <!-- SHOWCASE -->  
          <section class="showcase">
            <div class="container showcase-content">

<!-- MAINTEXT DIV -->
               <div class="centerhelp"> <div id="maintext" ></div></div>
<!-- MAINTEXT DIV -->                
             </div>
          </section>
        <!-- SHOWCASE END -->

和 CSS:

.showcase {

  background-image: url(...);
  height: 380px;
  width: 100%;

#maintext {
    padding: 0px;
    display: inline-block;
    float: left;

  margin-top: 91px;
  width: 430px;

    h1 {
        padding: 0;
        margin: 0;
    }
    p {
        padding: 0;
        margin: 0;
        }
    }

Answer 1

这里你有一个工作 jsfiddle你的例子

@media (max-width: 1000px) {
    .centerhelper {
        left: 50%;
        border: solid blue 2px;
     }
     div#maintext {
       text-align: center;
     }
     .navbar-header{
       text-align: center;
     }
    .pull-left{
      float:none!important;
    }
}