Question

我想创建一个布局响应的网页。这是我第一次使用Bootstrap而且我读过它基于12列结构。

在这个网页中，我必须插入一个滑块，单选按钮，一个复选框和d3.js中的图形，其中一些具有固定的宽度。例如，地图的宽度为600像素（它不能小，否则会变形）。热图具有可变宽度，因为它取决于所选数据。小的倍数图表是32个非常小的图表（每个图表的大小为80x40）。

我希望在此图中显示：

我解释得更好。如果屏幕尺寸很大，则热图放在地图的右侧（案例1）。

如果屏幕尺寸较小，地图容器的大小不会改变，热图容器会变小，如果它能够包含热图，那么热图就会放在地图旁边（案例2）），否则它位于地图下方（案例3）。

这是我的代码：

<body>

    <!-- YEAR SELECTOR -->
    <div id='year-selector-container'>
        <input id='year-slider' class='year-range' type='range' min='1981' max='2017' value='2016' step='1'>
        Year: <span id='year-span'>2016</span>
    </div>

    <!-- VACCINE SELECTOR -->
    <div id='vaccine-selector-container'>
        <form id='vaccine-selector'>
            <input type='radio' name='vaccine-selector' id='rb-dtp' value='DTP' checked />
            <label for='rb-dtp' title='Vaccine against diphtheria, tetanus, pertussis'>DTP</label>

            <input type='radio' name='vaccine-selector' id='rb-hib' value='HIB' />
            <label for='rb-hib' title='Vaccine against haemophilus influenzae type B'>HIB</label>

            <input type='radio' name='vaccine-selector' id='rb-mmr' value='MMR' />
            <label for='rb-mmr' title='Vaccine against measles, mumps and rubella'>MMR</label>

            <input type='radio' name='vaccine-selector' id='rb-pol' value='POL' />
            <label for='rb-pol' title='Vaccine against poliomyelitis'>POL</label>

            <input type='radio' name='vaccine-selector' id='rb-hepB' value='HEP B' />
            <label for='rb-hepB' title='Vaccine against hepatitis b'>HEP B</label>
        </form>
    </div>

    <!-- SHOW CASES OR NOT -->
    Cases: <input type='checkbox' id='showCasesOrNotId' name='showCasesOrNotName' value='ShowCasesOrNot' checked='true'>
    <label for='showCasesOrNotId'>Show reported cases</label>

    <!-- MAP -->
    <div id='map'></div>

    <!-- HEATMAP -->
    <div id="initialOrder">
        <button>Initial order</button>
    </div>
    <div id='heatmap'></div>
    <div id='sparkline'></div>

    <!-- SMALL MULTIPLES -->
    <div id='doublebar'></div>
    <div id='doubleline'></div>

    <!-- LEGEND -->
    <div id='legend-rect'></div>
    <div id='legend-circle'></div>

    <!-- PATTERN -->
    <div id='pattern'></div>

    <script src='/script/all.js' rel='script'/><{{!}}/script>
    <script src='/script/bubblemap.js' rel='script'/><{{!}}/script>
    <script src='/script/heatmap.js' rel='script'/><{{!}}/script>
    <script src='/script/smallMultiples.js' rel='script'/><{{!}}/script>
</body>

这些是结果：

HERE 代码。

我需要帮助。感谢

Answer 1

您可以尝试这样做。

要实现您的目标，您需要使用CSS @media rule。然后添加@media screen and (max-width: 880px)这意味着只有在屏幕尺寸小于880px时才会实现样式。

@media screen and (max-width: 880px){
    
    .row #vaccine-selector-container,
    .row #showCasesOrNotDivId,
    .row #map,
    .row #heatmap{
        flex: auto;
        max-width: 100%;
    }
    
}

Answer 2

这是你在小提琴中所要求的。你没有问你想要哪个设备断点，所以我选择了一些。如果您想了解更多详情，请告诉我。

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row my-4">
        <div class="col">
            <div class="jumbotron">
                <h1>Bootstrap 4 - Create a responsive layout with fixed width elements using Bootstrap 4</h1>
                <p class="lead">by djibe.</p>
                <p class="text-muted">(thx to BS4)</p>
                <p class="lead">
                    Tutorial
                </p>
                <ol>
                    <li>Just use standard Bootstrap 4 classes and layout</li>
                    <li>(You didn't precise which breakpoints you wanted to use)</li>
                    <li>The design is breaked on small devices as your fixed width exceeds their width (600px)</li>
                    <li>You'll have to use CSS3 flexboxes for the footer to be bottom attached</li>
                    <li>Et voilà</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col py-2" style="background: #D7E2BC">
            SLIDER
        </div>
    </div>
    <div class="row">
        <div class="col-sm" style="background: #ED9C53">
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
                <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
                <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
            </div>
        </div>
        <div class="col-sm d-flex" style="background: #E07000">
            <div class="custom-control custom-checkbox m-auto">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-auto" style="background: #B75146;">
          <div class="font-weight-bold text-uppercase text-white" style="width: 600px;height: 300px">
            MAP
          </div>
        </div>
        <div class="col" style="background: #5B89D4">
            <p class="font-weight-bold text-uppercase text-white">
                HEATMAP
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col py-2 d-flex" style="background: #98CF4C">
            <div class="m-auto">
                32 small multiples
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            White space
        </div>
    </div>
</div>
<footer class="bg-light">
    <div class="container-fluid">
        <div class="row">
            <div class="col py-3">
    FOOTER
            </div>
        </div>
    </div>
</footer>

＆＃13;

使用Bootstrap 4

2 个答案: