Question

CSS

   #category{
    width: 85%;
    height: 65%;
    //border: thin darkgray solid;
    margin: 0 auto;
    margin-top: 2%;
    bottom: 0;
}
    .interest_categories{

        width: 21%;
        height: 15%;
        border: thin darkgrey solid;
        margin-left:10px ;
        margin-top: 10px;
        float: left;
    }

    .interest_categories input{
        width: 100%;
        height: 100%;
        font-size: 1em;
        text-align: center;
        vertical-align: middle;
    }

HTML

<div id="category" style="width: 96%; margin-top: 5px; height: 75%; top: 0; border: thin red solid;">
            <div class="interest_categories">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="design_art" value="Design & Art"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="photography" value="Photography"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="science" value="Science"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="it" value="IT"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="technology" value="Technology"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="business" value="Business"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="entrepreneurship" value="Entrepreneurship"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="sports" value="Sports"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="games" value="Games"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="psychology" value="Psychology"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button"  id="humor" value="Humor"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories">
                <input type="button" id="travel" value="Travel"  style="color: #a1a1a1; background: white;">
            </div>

            <div class="interest_categories">
                <input type="button" id="nature" value="Nature"  style="color: #a1a1a1; background: white;">
            </div>

            <div class="interest_categories">
                <input type="button" id="food_drink" value="Food & Drink"  style="color: #a1a1a1; background: white;">
            </div>

            <div class="interest_categories">
                <input type="button" id="fashion" value="Fashion"  style="color: #a1a1a1; background: white;">
            </div>

            <div class="interest_categories">
                <input type="button" id="history" value="History"  style="color: #a1a1a1; background: white;">
            </div>

        </div><!--Category-->

在这里，我想要我的字体，即使我调整窗口大小也不要隐藏。当我调整浏览器窗口大小时，字体被隐藏，如图所示。所以当我调整窗口大小时我想这样做，categories应该适合。

Answer 1

您实际上没有使用if (x === 1) { x = 1; } else if (x === 2) { x = 2 } else if (x === "3") { x = "3" } else { x = 0; }。您必须将每个Bootstrap划分为四个部门。

row

你没有在Bootstrap中修改任何东西。我已经通过Bootstrap编辑了你的代码。可能不是你的答案的100％，但我认为你将能够用你自己的知识重新设计它。

3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3
3 + 3 + 3 + 3

CSS：

<div class="container" id="category" style="top: 0; border: thin red solid;">
  <div class="row">
    <div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
    </div>


   <div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>


<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>

<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>


<div class="row">
            <div class="interest_categories col-md-3">
                <input type="button" id="films" value="Films"  style="background: #ffc561; color: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="music" value="Music"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="dance" value="Dance"  style="color: #a1a1a1; background: white;">
            </div>
            <div class="interest_categories col-md-3">
                <input type="button" id="reading" value="Reading"  style="color: #a1a1a1; background: white;">
            </div>
</div>

     </div>        
</div>

CSS - 在调整浏览器窗口大小时，字体隐藏在按钮中

1 个答案: