前提提要

本文不具有泛化性，更多的是自己設計時候的不細心造成的，原因是，margin-top設定在了他倆父元素上，導致的，具體為啥會導致這樣，俺也不懂，我只是個菜雞

問題

原來的程式碼

<!-- 首行logo -->
<div class="container">
    <div class="logotop">
        <div class="col-xs-4 col-sm-4 col-md-4 col-xs-offset-8 col-md-offset-8 col-sm-offset-8"
            style="margin-top: 20px;padding-left: 50px; padding-right: 0px;">
            <p class="text-center" id="show_time" style="color: aliceblue;"></p>
            <p style="line-height: 2px"><br /></p>
            <form class="navbar-form">
                <div style="width: 30%;float: right;">
                    <button type="submit" class="btn btn-default text-center">搜尋</button>
                </div>
                <div class="form-group" style="width: 60%;float: right;">
                    <input type="text" class="form-control" placeholder="站內搜尋" style="width: 90%;">
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 首行logo -->

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script>//這裡就一句話就可以顯示時間
    setInterval("show_time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 100);
</script>
 

解決方法

把原來放時間的 p 單獨獨立出來放在一個div中,然後不是給父元素設定 margin-top 而是給子元素設定，程式碼如下：

<div class="col-xs-4 col-sm-4 col-md-4 col-xs-offset-8 col-md-offset-8 col-sm-offset-8" style="padding-left: 50px; padding-right: 0px;">
	<div style="height: 30px;   margin-top: 20px;">
   		<p class="text-center" id="show_time" style="color: aliceblue;"></p>
	</div>
 

<!-- 首行logo -->
<div class="container">
    <div class="logotop">
        <div class="col-xs-4 col-sm-4 col-md-4 col-xs-offset-8 col-md-offset-8 col-sm-offset-8"
            style="padding-left: 50px; padding-right: 0px;">
            <div style="height: 30px;   margin-top: 20px;">
                <p class="text-center" id="show_time" style="color: aliceblue;"></p>
            </div>
            <form class="navbar-form">
                <div style="width: 30%;float: right;">
                    <button type="submit" class="btn btn-default text-center">搜尋</button>
                </div>
                <div class="form-group" style="width: 60%;float: right;">
                    <input type="text" class="form-control" placeholder="站內搜尋" style="width: 90%;">
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 首行logo -->
 

修改後的效果