Поле поиска не остается в контейнере верхнего заголовка - PullRequest
Новая
       2

Поле поиска не остается в контейнере верхнего заголовка

1 голос
/ 15 января 2020

Я только учусь, как использовать css и bootstrap для создания веб-сайта на основе шаблона psd, проблема в том, что я не могу сохранить окно поиска внутри контейнера, и оно остается внизу.

Вот мой код 

.search-area {
  margin-top: 3px;
  text-align: right;
}

.search-area input {
  background: #333333;
  color: #ffffff;
  border: 0px solid;
}
<body>
    <div id="header-area1">
        <div class="container">
            <div class="top-header col-12 bg-succes">
                <div class="left-header col-8">
                    <div class="feed-area">
                        <ul>
                            <li> <a href="">Sign Up</a></li>
                            <li> <a href="">Login</a></li>
                            <li> <a href="">Rss Feed</a></li>
                            <li id="last"> <a href="">Archived News</a></li>
                        </ul>
                    </div>
                    <div class="right-header col-4">
                        <div class="search-area">
                            <form action="">
                                <input type="textplaceholder=" Search...">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Ответы [ 3 ]

2 голосов
/ 15 января 2020

Я переписал твой код, чтобы исправить это. не забудьте использовать класс "row" из ваших столбцов в bootstrap

<div id="header-area1">
        <div class="container">
                <div class="top-header col-12 bg-succes">
                    <div class="row">
                        <div class="left-header col-8">
                            <div class="feed-area">
                                <ul>
                                    <li> <a href="">Sign Up</a></li>
                                    <li> <a href="">Login</a></li>
                                    <li> <a href="">Rss Feed</a></li>
                                    <li id="last"> <a href="">Archived News</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="right-header col-4">
                            <div class="search-area">
                                <form action="">
                                    <input type="textplaceholder=" Search...">
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
2 голосов
/ 15 января 2020

Обновление моего ответа отсутствует row до col

.search-area {
  margin-top: 3px;
  text-align: right;
}

.search-area input {
  background: #333333;
  color: #ffffff;
  border: 0px solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
    <div id="header-area1">
        <div class="container">
            <div class="top-header row bg-succes">
                <div class=" col-8">
                    <div class="feed-area">
                        <ul>
                            <li> <a href="">Sign Up</a></li>
                            <li> <a href="">Login</a></li>
                            <li> <a href="">Rss Feed</a></li>
                            <li id="last"> <a href="">Archived News</a></li>
                        </ul>
                    </div>
                    
                </div>
                <div class=" col-4">
                        <div class="search-area">
                            <form action="">
                                <input type="text" placeholder=" Search...">
                            </form>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</body>
1 голос
/ 15 января 2020

Используйте эту HTML структуру для выравнивания по правому краю в окне поиска. Добавьте col-6 с feed-area классом. И вместо этого <div class="left-header col-8"> используйте это <div class="left-header row">

<div id="header-area1">
        <div class="container">
            <div class="row">
                <div class="top-header col-12 bg-succes">
                    <div class="left-header row">
                        <div class="feed-area col-6">
                            <ul>
                                <li>
                                    <a href="">Sign Up</a>
                                </li>
                                <li>
                                    <a href="">Login</a>
                                </li>
                                <li>
                                    <a href="">Rss Feed</a>
                                </li>
                                <li id="last">
                                    <a href="">Archived News</a>
                                </li>
                            </ul>
                        </div>
                        <div class="right-header col-4">
                            <div class="search-area">
                                <form action="">
                                    <input type="textplaceholder=">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</p>

.search-area {
      margin-top: 3px;
      text-align: right; 
       }

    .search-area input {
         background: #333333;
         color: #ffffff;
         border: 0px solid;
     }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...