CSS

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-->

在这里，我希望我的字体即使在调整 window 大小时也不会被隐藏。当我调整浏览器 window 大小时，字体被隐藏，如图所示。所以我想在调整 window 大小时执行此操作，然后 categories 应该适合。

Answer 1

你实际上没有使用Bootstrap。您必须将每个 row 分成四个部分。

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

您尚未修复 Bootstrap 中的任何内容。我已经通过 Bootstrap 编辑了您的代码。可能不是你 100% 的答案，但我认为你将能够用你自己的知识重新设计它。

<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:

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

        border: thin darkgrey solid;
        float: left;
    }

    .interest_categories input
    {
        text-align: center;
    }

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

CSS - font is being hidden in button while resizing browser window

resize

responsive-design

twitter-bootstrap