在Bootstrap上將標題拆分爲2列（每邊50％）

Question

我已經在網站周圍搜索，並且似乎每個人都需要更高級的版本。

如果有人能解決我很快的問題，我將永遠感激不盡。我目前正在使用Bootstrap構建一個站點（所有內容都在單頁上）。 在主頁我希望它看起來像這樣：

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

什麼在格式化網頁這樣的最佳方式。在html/css的頭文件中有一個簡單的50/50分割。

我試圖花車和我現在做的自舉列

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

但是用這種方法，我真的不知道該如何，因爲他們都是.COL-XS-style這個在CSS 6，它的風格是雙方。但是，這是如何拆分頁面，還是有一個更好，更容易的方法來保持它的利潤率，並保持響應？

當我使用左/右浮動方法時，背景顏色與「關於我」部分保持重疊。如果有人能幫我開始，我會非常感激。

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

這是因爲你有相當直截了當日e基本/標準行/列結構全部準備就緒。只需在列中添加一個班級或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>