В основном разделе шапки все работает нормально. Что я пытаюсь сделать, так это создать простую строку с 3 столбцами после нее, но они отображаются как 3 разных строки, а не 1 строка с 3 столбцами? Ниже приведен код. Это странно, потому что раздел заголовков работает отлично! Спасибо за любую помощь и совет!

<!DOCTYPE html>
<html>

<head>
    <title>The Beckwood - Scunthorpe</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=satisfy" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">


</head>

<body>

    <div class="header-main">

        <nav class="navbar navbar-default">
            <div class="container">
                <a class="navbar-brand" href="#" >
                     <img src="assets/img/logo.png">

                </a>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">HOME</a></li>
                         <li><a href="#">MENU</a></li>
                          <li><a href="#">GALLERY</a></li>
                           <li><a href="#">ABOUT</a></li>
                            <li><a href="#">BOOK A TABLE</a></li>
                            <li><a href="#">CONTACT</a></li>
                        </ul>
                    </div>
            </div>
        </nav>
        <div class="hero">
            <h1 id="welcome">Welcome to The Beckwood.</h1>
            <p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
            <div class="btn btn-primary">View Menu</div>
            <div class="btn btn-primary">Book a table</div>
        </div>
    </div>

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

</body>

</html>

КОД CSS, ВОЗМОЖНО, ЧТО-ТО ВЛИЯЕТ НА ЭТО?

body {
    font-family: 'Montserrat', sans-serif;

}

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {
  height: 90px;
  width: auto;
}

.logo {
    height:200px;
    width:400px;
}
.header-main {
    color: white;
    background: url("../../assets/img/banner.png") no-repeat ;
    background-size: cover;
    background-position: bottom;
    padding-bottom: 20px;

}

.header-main .navbar-nav>li>a {
    color: white;
    font-size: 13px;
    border-radius: 10px;

}

.header-main .navbar {
    margin-bottom: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border-bottom:none;
    background-color: transparent;
    min-width: 300px;
    border: none;
}

.header-main .navbar-default .navbar-nav>.open>a,
.header-main .navbar-default .navbar-nav>.open>a:focus,
.header-main .navbar-default .navbar-nav>.open>a:hover {
    color: #ccc;
    background-color: transparent;
}

.header-main .nav>li>a:focus,
.header-main .nav>li>a:hover {
    color: #ccc;
    background-color: transparent;
}

.header-main .navbar-nav>li {
    margin-right: 10px;
}

.header-main .navbar-nav {
   margin-top: 12px;
}

.header-main .navbar-toggle {
    background-color: transparent !important;
    margin-top: 20px;
    border: 1px solid #fff;
}

.header-main .navbar-toggle .icon-bar {
    background-color: white;
}


.header-main .hero {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 100px;
}

.header-main .hero h1 {
    color: #FFB03B;;
    font-family: 'Satisfy', cursive;
    font-size: 70px;
    margin-bottom: 36px;

}


.header-main .hero p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    max-width: 660px;
    margin: 0 auto 20px;
    font-weight: normal;
    line-height: 1.5;
}

.header-main .btn-primary {
    color: #fff;
    background-color: transparent;
    border-color: #fffbfb !important;
    outline:none;
    margin-right: 20px;
    margin-top: 20px;
    font-size: 19px;
    padding: 18px 24px;
    transition:0.2s background-color;
}

.header-main .btn-primary:hover {
    background-color:rgba(255,255,255,0.1);
}

.header-main .btn-primary:active {
    transform:translateY(1px);
}

@media screen and (max-width: 767px) {

    .header-main .navbar-default .navbar-nav .open .dropdown-menu>li>a{
        color: #fff;
        font-size: 16px;
    }

    .header-main .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{
        color: #ccc;
    }

    .header-main .navbar-collapse {
        margin-left: 20px;
        border-top: none;
        box-shadow: none;
    }

    .header-main .hero{
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .header-main .hero h1{
        font-size: 42px;
    }
}
0
Harry 12 Мар 2018 в 22:22

2 ответа

Лучший ответ

Помимо ошибок, которые я опубликовал в своем последнем комментарии, настоящая проблема в том, что вы не указываете размер каждого столбца. С помощью начальной загрузки вы должны указать, сколько столбцов сетки займет каждый столбец. Всего 12 по горизонтали. Итак, для вашего кода вам просто нужно добавить -4 к классу:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
        One of three columns
    </div>
    <div class="col-sm-4">
        One of three columns
    </div>
    <div class="col-sm-4">
        One of three columns
    </div>
</div>

Вот простой пример, который объясняет это больше на W3:

https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

2
Ryan Gibbs 12 Мар 2018 в 19:40

Вы используете Bootstrap 3, поэтому вам нужно указать ширину столбца, например col-sm-4, а не col-sm. если вы использовали Bootstrap 4, col-sm должно быть хорошо.

0
redRex 12 Мар 2018 в 19:48