文章/答案/技术大牛

发布

问用靴带推拉
EN

Stack Overflow用户

提问于 2014-11-29 16:59:04

回答 1查看 262关注 0票数 0

我刚刚把引导贴到我的网站上，我一直在测试它。我一直在尝试使用网格系统，我遇到了一个小问题。所以在我的网站上我有一个标题，看起来是这样的“按钮1-6 \ Logo \ Login”。现在，当我的网站缩小到767像素和更小的大小时，它仍然像上面一样显示，但是它们都有自己的行。所以看起来是这样的：“按钮1-6 (顶行)\ Logo (第二行)\x Login (第三排)”。现在，每当我尝试做推拉的事情，它仍然没有修复它。最后，我希望它能在767像素以下的屏幕上显示这样的"Logo (顶行)x按钮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>

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-29 17:46:10

  <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 -->

演示：https://jsbin.com/mutoju/1/edit

命令html，就像它在小视图上一样。
按最小宽度推拉

.col-sm-4与.col-md-4和.col-lg-4相同。这是33.3333%的家长。从.col-sm-最小宽度(默认情况下为768 be )到何时，这将是大小。所以您不需要使用.col-md-4或.col-lg-4，这是多余的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27204682

复制

相似问题

问用靴带推拉
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用靴带推拉EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用靴带推拉
EN