在 Bootstrap 上将 header 分成 2 列（每边 50%）

Question

我在网站上搜索了一下，似乎每个人都要求提供更高级的版本。

如果有人能解决我的快速问题，我将不胜感激。我目前正在用 Bootstrap 构建一个站点（所有内容都在 1 个页面上）。对于主页，我希望它看起来像这样：

________________________ 
|       <Navbar>        |
|_______________________|
|   Title   |           |
|           |    Icons  |
|   Loader  |           |
|           |    Photo  |
|           |           |
|           |           |
|        <Header>       |
|___________|___________|
|        About Me       |
|           etc..       |

像这样格式化页面的最佳方法是什么。 html/css 中 header 的简单 50/50 拆分。

我试过花车，现在我正在做 bootstrap 列

    <Header>
    <! LEFT SIDE !>         
    <div class="col-xs-6">
     <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
     <div class="loader">Loading...</div>             
    </div>

    <! RIGHT SIDE !>
    <div class="col-xs-6"> 
      <p> Join me on</p>
      <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
      <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="@gmail.com"> <i class="fa fa-envelope"></i></a>
    </div>

但是使用这种方法，我真的不知道如何在 CSS 中设置它的样式，因为它们都是 .col-xs-6 并且它在两侧都设置了样式。但这是拆分页面的方式还是有更好、更简单的方法将其保持在页边距内并保持响应？

当我使用 left/right 浮动方法时，背景颜色一直重叠到 'About Me' 部分。如果有人可以帮助我开始，我将非常感激。

Answer 1

我会这样做：

<div class="container">
  <header>
    <div class="row">
      <div class="left col-xs-6">
       <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
       <div class="loader">Loading...</div>             
      </div>
      <div class="right col-xs-6"> 
        <p> Join me on</p>
        <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
        <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
        <a href="@gmail.com"> <i class="fa fa-envelope"></i></a>
      </div>
    </div>
    <div class="clearfix"></div>
  </header>
</div>

Bootply Example

Answer 2

做这样的事情：http://jsfiddle.net/xf147bnp/1/

.left{ background: #abc }
.right{ background: #ccc;}
.row{background: #ccc;}
section{background: #383838; color: #fff; margin:0px; padding:10px; }
.title{background: #909090;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <section><h3>Navbar</h3></section>
    <! LEFT SIDE !>
     <div class="row">
        <div class="col-xs-6 left">
         <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
         <div class="loader">Loading...</div>             
        </div>

    <! RIGHT SIDE !>
        <div class="col-xs-6 right"> 
          <p> Join me on</p>
          <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
          <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
          <a href="@gmail.com"> <i class="fa fa-envelope"></i></a>
        </div>  
    </div>


    <! LEFT SIDE !>
     <div class="row">
        <div class="col-xs-12 title">
            <h3>About Me</h3>
        </div>  
    </div>

Answer 3

这非常简单，因为您已经准备好 basic/standard row/column 结构。只需在您的列中添加 class 或 ID 并格式化即可。

.navbar.navbar-custom {
  margin-bottom: 0;
  background: #fff;
}
header {
  margin-bottom: 20px;
  background: #266080;
  height: 225px;
  color: #fff;
  padding: 20px;
}
header #right-header {
  margin-top: 15px;
  text-align: center;
}
header #left-header h1 {
  font-size: 50px;
  line-height: 135%;
}
header #right-header p {
  font-size: 40px;
}
header #right-header i {
  margin: 10px;
}
@media (max-width: 767px) {
  header {
    padding: 5px;
    height: 135px;
  }
  header #left-header h1,
  header #right-header p {
    font-size: 20px;
  }
  header #right-header {
    margin-top: 15px;
  }
  header #right-header i {
    margin: 5px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<Header>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6" id="left-header">
        <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
        <div class="loader">Loading...</div>
      </div>
      <div class="col-xs-6" id="right-header">
        <p>Join me on</p> <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
        <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="@gmail.com"> <i class="fa fa-envelope fa-2x"></i>
        </a>

      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div class="alert alert-info">Yup</div>
</div>

在 Bootstrap 上将 header 分成 2 列（每边 50%）

Splitting header into 2 columns (50% each side) on Bootstrap

html

css

twitter-bootstrap

two-columns

Bootply Example