Question

我正在创建一个包含可变大小内容的网页。我使用Bootstrap 4来使布局响应，但我遇到了一些问题。

内容基本上是SVG元素，并且是：

一个名为First且可变高度和宽度的元素svg
一个名为Element的元素svg，其固定宽度和高度与First相同。此元素应始终位于First旁边（在其右侧），如果不与First一起使用，则永远不应该在头部。因此First和Element已关联且无法拆分
一个名为Second的元素svg，它具有固定的宽度和高度
一个名为Third的元素，它基本上包含文本，并且字符数可能会有所不同
一个名为Fourth的元素svg，它具有固定的高度和宽度。

元素的排列是这样的：

<div class='container-fluid' id='containerAll'>     

    <div class='row' id='slider&radioButtonsRow'>
        <div class='col' id='yearSlider'>
            <input type='range' min='2000' max='2018' value='2017' step='1'>
        </div>
        <div class='col' id='typeButtons'>
            <input type='radio' id='rb-1' name='1-rb' value='1' checked>
            <label for='rb-1'>Radio button 1</label>
            <input type='radio' id='rb-2' name='2-rb' value='2'>
            <label for='rb-2'>Radio button 1</label>
            <input type='radio' id='rb-3' name='3-rb' value='3'>
            <label for='rb-3'>Radio button 3</label>
        </div>
    </div>

    <div class='row' id='chartsRow'>

        <div class='col small-gutters' id='firstCol'>
            <div class='row' id='first&elementRow'>
                <div class='col' id='first'></div>
                <div class='col' id='element'></div>
            </div>
            <div class='row' id='buttonRow'>
                <div class='col' id='button'><button>Button</button></div>
            </div>
        </div> 

        <div class='col small-gutters' id='secondCol'>
            <div class='row' id='secondRow'>
                <div class='col' id='second'></div>
            </div>
            <div class='row' id='checkButtonRow'>
                <div class='col' id='checkButtonId'>
                    <div class='custom-control custom-checkbox'>
                        <input type='checkbox' class='custom-control-input' id='checkId' name='checkName' value='check' checked>
                        <label class='custom-control-label active' for='checkId'>Check me</label>
                    </div>
                </div>
            </div>
        </div> 

        <div class='col small-gutters' id='thirdCol'>
            <div class='row' id='thirdRow'>
                <div class='col' id='third'>
                    <span id='third-title'>Large title</span><br>
                    <span class='third-bold'>Info1: </span><span class='third-not-bold' id='third-1'>Lorem ipsum</span><br>
                    <span class='third-bold'>Info2: </span><span class='third-not-bold' id='third-2'>Lorem ipsum...</span><br>
                    <span class='third-bold'>Info3: </span><span class='third-not-bold' id='third-3'>Lorem</span><br>
                </div>
            </div>
            <div class='row' id='fourthRow'>
                <div class='col' id='fourth'>
                    <div id='fourth1'></div>
                </div>
            </div>
        </div>  

    </div> 
</div>

这是我的Js和CSS代码（添加以突出显示元素）：

/**
 * Text
 */
body {
    fill: black;
    font-size: 8pt;
    font-family: Consolas, courier;
}

/**
 * Bootstrap containers
 */
#yearSlider {
    background-color: Crimson;
}
#typeButtons {
    background-color: Tomato;
}
#first {
    background-color: Orange;
    float: left;
}
#element {
    background-color: Gold;
    width: 60px;
    float: left;
}
#button {
    background-color: Khaki;
}
#second {
    background-color: GreenYellow;
}
#checkButtonId {
    background-color: SpringGreen;
}
#third {
    background-color: Aquamarine;
}
#fourth {
    background-color: PowderBlue;
}

/* reduce space between columns 
.small-gutters {
    margin-right: -10px;
    margin-left: -10px;
}*/

/**
 * FIRST
 */
#firstSvg {
    border: 1px black solid;
}
#element {
    float: left;
}
#element svg {
    display: inherit;
    border: 1px black solid;
}

/**
 * SECOND
 */
#second-svg {
    border: 1px solid black;
}

/**
 * THIRD
 */
#third-title {
    font-weight: bold;
    font-size: 15pt;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.third-bold {
    font-weight: bold;
}

.third-not-bold {
    font-weight: normal;
}

/**
 * FOURTH
 */
#fourth1 svg {
    border: 1px solid black;
}

/**
 * FIRST
 */
var widthData = 250; // random number
var heightData = 300; // random number
var margin = {top: 5, right: 5, bottom: 5, left: 5};
var width = widthData - margin.right - margin.left; 
var height = heightData - margin.top - margin.bottom; 

var first = d3.select('#first');

var firstSvg = first.append('svg')
    .attr('id', 'firstSvg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

var elementSvg = d3.select('#element')
    .append('svg')
    .attr('class', 'data-svg')
    .attr('width', 60)
    .attr('height', 15) 
    .attr('x', 0);

/**
 * SECOND
 */
var widthSec = 420;
var heightSec = 380; 

var second = d3.select('#second');
var secondSvg = second.append('svg')
    .attr('id', 'second-svg')
    .attr('width', widthSec)
    .attr('height', heightSec);

/**
 * FOURTH
 */
var marginFourth = {top: 10, right: 10, bottom: 35, left: 30};
var widthFourth = 350 - marginFourth.left - marginFourth.right;
var heightFourth = 150 - marginFourth.top - marginFourth.bottom;

var svgFourth = d3.select("#fourth1")
    .append("svg")
    .attr("width", widthFourth + marginFourth.left + marginFourth.right)
    .attr("height", heightFourth + marginFourth.top + marginFourth.bottom)
    .append("g")
    .attr("transform", "translate(" + marginFourth.left + ", " + marginFourth.top + ")");

以下是目前的工作方式：

但我想要的是略有不同。黑色边框标识元素的大小。例如，考虑具有固定宽度和高度的Second元素：为什么右边有空格？是否可以使绿色列（第二个）与其内容一样宽，或者元素svg Second多少？

First的相同推理：后者具有可变的宽度和高度，但我希望第一列的宽度适合（First + Element）的宽度。我该怎么办？

我是Bootstrap世界的新手，我读到它基于12列，但我更倾向于不使用语法col-*-*，因为列应该具有取决于内容的可变宽度。我不知道先验，例如第一列是宽5，第二列是3和第三列。这取决于内容。

完整代码HERE。

我需要帮助。提前谢谢

使用Bootstrap

0 个答案: