Question

我已经开始为当地餐馆建立一个网站，我不熟悉使用Bootstrap。目前我正在努力使页面的标题工作。我制作了一个固定位置的标题，我使用内置于bootstrap中的按钮，虽然有许多css样式更改，但作为网站上其他页面的标签。有4个标签。在第2和第3个标签之间是餐厅的标志，png文件。首先，我设计的页面仅适用于大屏幕显示。因此，在我的2560 x 1440分辨率屏幕上，一切看起来都应该如此，如下图所示：

enter image description here

但是，当我开始减小屏幕尺寸时，每个按钮和徽标图像之间的填充开始减少。最终，在内部屏幕尺寸为1638 x 1277左右时，右侧最接近徽标的按钮开始与徽标重叠，这一切都在发生时仍被视为“大”屏幕。这是一张照片：

Not working 为了解决这个问题，我尝试将徽标的宽度设置为100％而不是286px，它解决了与徽标重叠的按钮的问题，但它没有产生我想要的结果。我希望徽标始终保持相同的大小。我还希望每个按钮和徽标之间的水平空间始终相同，而不是相对于它们之间的原始长度，相对于彼此是相同的。就像按钮x和按钮y之间的空格一样，按钮y和徽标之间的数量相同。

这是头部：

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
    .header{
        background-color: red;
    }
    .col-lg-2, .col-lg-4, .col-lg-1{
        background-color: transparent;
        text-align: center;
    }
    .header{
        height: 140px;
    }
    .header h3{
        color: white;
        font-size: 200%;
        font-family: 'HeaderFont';
        margin-top: 10px;
    }
    #logo{
        margin-top: 30px;
    }
    .button{
        background-color: black;
        background-repeat: no-repeat;
        border: none;
        cursor:pointer;
        overflow: hidden;
        outline: none;
        margin-top: 45px;
        padding-right: 18%;
        padding-left: 18%;
        padding-top: 5px;
        padding-bottom: 5px;
    }
</style>

这是身体：

<div class="container-fluid">
    <div class="row">

        <div class="header">
            <div class="col-lg-3"></div>

            <div class="col-lg-1">
                <button type="tab" class="button"><h3>Home</h3></button>
            </div>

            <div class="col-lg-1">
                <button type="tab" class="button"><h3>About</h3></button>
            </div>

            <div class="col-lg-2">
                <img src="http://www.sizzledcore.com/wp-content/uploads/2009/11/google-new-logo.png" id="logo" style="width:286px; height:106px; vertical-align:middle"></a>
            </div>

            <div class="col-lg-1">
                <button type="tab" class="button"><h3>Menu</h3></button>
            </div>

            <div class="col-lg-1">
                <button type="tab" class="button"><h3>Order</h3></button>
            </div>

            <div class="col-lg-3"></div>
        </div>

    </div>
</div>

Answer 1

好的，我明白了。我想要的是该列总是一定的宽度，图像的图像会变得大于列的宽度。要解决此问题，我将.header .col-lg-2设置为width: 286px;

换句话说，这是需要的CSS：

.header .col-lg-2{
    width: 286px;
}

使用自定义CSS和图像作为徽标的默认按钮，元素与自定义Bootstrap标头重叠

1 个答案: