Как я могу разместить контент справа от моего загрузочного навигатора

Так что я только недавно начал использовать загрузку, и я создал кнопки навигации. Но по какой-то причине я не могу поместить любой контент справа от кнопок. Я хотел бы иметь раздел для контента справа от кнопок с черным фоном.Как я могу разместить контент справа от моего загрузочного навигатора

body{ 
 
    overflow: hidden; 
 
    background-color: #1C213D; 
 
} 
 

 
ul li{ 
 
    position: relative; 
 
    text-align: center; 
 
    list-style: none; 
 
    display: block; 
 
    color: lightsteelblue; 
 
    font-size: 20px; 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    margin-top: 200px; 
 
} 
 

 
.nav{ 
 
    width: 200px; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-02-14 Anonymous

Вы ищете класс navbar-right? – jmag

Это продолжение на поставленный выше вопрос. Если вы хотите, чтобы какой-либо дизайн бутылочки отвечал требованиям, если вы хотите, чтобы он выглядел одинаково во всех размерах экрана, вы должны использовать эти классы col-md-4 col-lg-4 col-sm-4 col-xs-4 вместе. Также я использовал классы смещения col-lg-offset-1, так как он создаст автоматическую маржу (маржа в 1 столбце в этом случае) между вашими элементами и дизайн будет хорошо выглядеть.

body{ 
 
    overflow: hidden; 
 
    background-color: #1C213D; 
 
} 
 

 
ul li{ 
 
    position: relative; 
 
    text-align: center; 
 
    list-style: none; 
 
    display: block; 
 
    color: lightsteelblue; 
 
    font-size: 20px; 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    margin-top: 50px; 
 
} 
 

 
.nav{ 
 
    width: 200px; 
 
} 
 

 
.main{ 
 
    margin-top:50px; 
 
    }

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    </div> 
 
</nav> 
 
    
 
    <div class="container-fluid"> 
 
     <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
     </div> 
 
     <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main"> 
 
      Main content goes here 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

Надеется, что это помогает!

источник

2017-02-15 00:13:36 neophyte

Вы можете использовать коллектив- * классы начальной загрузки, назначить определенные ширину столбцов в вашем нав и определенную ширину колонки к вашему основному содержанию.

Проверьте результат в расширенном окне.

body{ 
 
    overflow: hidden; 
 
    background-color: #1C213D; 
 
} 
 

 
ul li{ 
 
    position: relative; 
 
    text-align: center; 
 
    list-style: none; 
 
    display: block; 
 
    color: lightsteelblue; 
 
    font-size: 20px; 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    margin-top: 50px; 
 
} 
 

 
.nav{ 
 
    width: 200px; 
 
} 
 

 
.main{ 
 
    margin-top:50px; 
 
    }

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <title>Home</title> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    </div> 
 
</nav> 
 
    
 
    <div class="container-fluid"> 
 
     <div class="col-md-4"> 
 
      <ul class="nav nav-pills nav-stacked" role="tablist"> 
 
        <li class="active"><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="projects.html">Projects</a></li> 
 
        <li><a href="contact.html">Contact</a></li>   
 
      </ul> 
 
     </div> 
 
     <div class="col-md-8 main"> 
 
      Main content goes here 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-02-14 19:06:13 WitVault

Это сработало, но всякий раз, когда я изменяю размер окна, текст идет прямо в нижнюю левую часть страницы. –

На самом деле это правильное поведение. Используйте col-xs-4 и col-xs-8 вместо col-md-4 и col-md-8 – WitVault

Как я могу разместить контент справа от моего загрузочного навигатора

ответ

Смежные вопросы