使用Bootstrap进行推拉

时间：2014-11-29 16:59:05

标签： html css twitter-bootstrap

我刚把Bootstrap放到我的网站上，我一直在测试它。我一直在尝试使用网格系统，我遇到了一个小问题。所以在我的网站上我有一个标题，看起来像这样的“按钮1-6 |标识|登录”。现在，当我的网站缩小到767像素和更小的尺寸时，它仍然显示如上，但它们每个都有自己的行。所以看起来像这样的“按钮1-6（顶行）|徽标（第二行）|登录（第三行）”。现在，每当我尝试推动和拉动时，它仍然无法修复它。最终我想在767像素以下的屏幕上显示如此“Logo（顶行）|按钮1-6（第二行）|登录（第三行）”。这是我的HTML文件：

<div id="wrapper" class="container">
<div id="header" class="row">

    <div id="headerleftside" class="col-lg-4 col-md-4 col-sm-4">
        <div class="row">
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 1 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 2 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 3 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 4 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 5 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 6 </h1>
                </div>
            </a>
        </div>
    </div>


    <div id="headertitle" class="col-lg-4 col-md-4 col-sm-4">

    </div>


    <div id="headerrightside" class="col-lg-4 col-md-4 col-sm-4">
        <form action="action.php" method="post">
            <button id="headersubmit" input type="submit"> Login </button>
            <p class="logininputboxs"> <input type="text" name="username" placeholder="Userame" required/> </p>
            <p class="logininputboxs"> <input type="password" name="password" placeholder="Password" required/> </p>
        </form>
    </div>

</div>
</div>

另请注意，上面的代码没有，和其他标签，因为这个文件被用作PHP的include（）。然后CSS文件如下：

/*
Used Colors:
• Black - Black
• Orange - Orange
• Light Blue - #4DB8FF
• Normal Blue - #296ACC
• Normal Blue (Darker) - #2156A6
• Gray - #292D30
*/

/*-------------------------------------------------------*/

#wrapper {
    width: 100%;
    height: 750px;
    position: absolute;
}

/*-------------------------------------------------------*/

#header {
    height: 15%;
    background-color: #292D30;
    position: static;
    border-bottom: 5px solid #296ACC;
    z-index: 5;
}

/*-------------------------------------------------------*/

#headerleftside {
    background-color: #292D30;
}

.headerbuttons {
    background-color: black;
    font-size: 65%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 0%;
    font-color: #4DB8FF; /*The color is defined in the <head>, as well as the hover.*/
    border: 1px solid white;
    border-radius: 5px;
}

/*-------------------------------------------------------*/

#headertitle {
    height: 120%;
    background-color: black;
    border-bottom: 5px solid #2156A6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 10;
    background: black url("http://localhost/postin'/title.png") no-repeat center center;
}

#headertitle:hover {
    box-shadow: 0px 0px 5px 5px #2156A6;
    z-index: 10;
    background: black url("http://localhost/postin'/title_with_logo.png") no-repeat center center;
}

/*-------------------------------------------------------*/

#headerrightside {
    background-color: #292D30; 
}

.logininputboxs {
    margin-left: 5%;
    margin-top: 0%
}

input[type=text] {
    font-family: courier;
    font-size: 80%;
    height: 20%;
    border: 1px solid #4DB8FF;
    border-radius: 3px;
}

input[type=password] {
    font-family: courier;
    font-size: 80%;
    height: 20%;
    border: 1px solid #4DB8FF;
    border-radius: 3px;
}

.input_error_required {
    font-family: courier;
    font-size: 80%;
    height: 20%;
    border: 1px solid red;
    border-radius: 3px;
}

.input_error_unique {
    font-family: courier;
    font-size: 80%;
    height: 20%;
    border: 1px solid red;
    border-radius: 3px;
}

#headersubmit {
    width: 15%;
    height: 10%;
    font-size: 100%;
    border: 1px solid white;
    border-radius: 3px;
    text-align: center;
    color: #4DB8FF;
    background-color: black;
    margin-left: 45%;
}

/*-------------------------------------------------------*/

#sidebar {
    height: 84%;
    width: 20%;
    background-color: red;
    position: static;
    z-index: 1;
}

.sidebarbuttons {
    width: 80%;
    height: 12%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border-radius: 5px;
    position: relative;
    text-align: center;
    font-size: 80%;
    line-height: 500%;
    top: 5%;
}

/*-------------------------------------------------------*/

a, u {
    text-decoration: none; !important
}

最后，实际文件也由PHP下面的Include（）完成：

<html lang="en-US">

<link rel="icon" type="image/png" href="http://localhost/postin'/favicon.ico?v=2">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="bootstrap-3.3.1-dist/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="style.css"/>

<style type="text/css">
<!--
    body {
        margin: 0px;
    }
-->
</style>
<style type="text/css">
    a:link {color: #4DB8FF;}      /* unvisited link */
    a:visited {color: #4DB8FF;}   /* visited link */
    a:hover {color: orange;}     /* mouse over link */
    a:active {color: orange;}    /* selected link */
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>

1 个答案:

答案 0 :(得分：1)

  <div class="container">
      <div class="row">

        <div class="col-sm-4 col-sm-push-4">
         LOGO
        </div><!-- /.col-sm-4 -->

        <div class="col-sm-4 col-sm-pull-4">
         BUTTONS
        </div><!-- /.col-sm-4 -->

        <div class="col-sm-4">
         OTHER STUFF
        </div><!-- /.col-sm-4 -->

      </div><!-- /.row -->

  </div><!-- /.container -->

DEMO：https://jsbin.com/mutoju/1/edit

  1. 按照小视口订购html
  2. 以最小宽度推拉

    3. .col-sm-4与.col-md-4和.col-lg-4相同。它是父母的33.3333％。从.col-sm-最小宽度（默认为768px）到任何时候，这将是大小。因此，您不需要使用.col-md-4或.col-lg-4，这是多余的。

相关问题
最新问题