Разделение заголовка на 2 столбца (по 50% с каждой стороны) в Bootstrap

Я искал по всему сайту, и все, казалось, просили более продвинутые версии этого.

Я был бы очень благодарен, если бы кто-нибудь смог решить мой очень быстрый вопрос. В настоящее время я создаю сайт с помощью Bootstrap (все на одной странице). Для домашней страницы я хочу, чтобы это выглядело так:

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

Каков наилучший способ форматирования страницы, как это. Простое разбиение 50/50 в заголовке в html/css.

Я попробовал поплавки, и теперь я делаю колонки начальной загрузки

    <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, и он стилизует обе стороны. Но так ли можно разделить страницу или есть лучший и более простой способ удержать ее на полях и оставаться отзывчивым?

Когда я использовал метод плавающего влево / вправо, цвет фона продолжал накладываться на раздел "О себе". Если бы кто-то мог помочь мне начать, я был бы очень благодарен.

Источник

3 ответа

Решение

Я бы сделал это так:

<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

Источник

Это довольно просто, поскольку у вас есть базовая / стандартная структура строк / столбцов. Просто добавьте класс или идентификатор в ваши столбцы и отформатируйте их.

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

Источник

Сделайте что-то вроде этого: 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>

Источник
Другие вопросы по тегам