Question

我有以下内容：

resultsDisplay = document.getElementById("rd");
startButton = document.getElementById("startbtn");
stopButton = document.getElementById("stopbtn");

recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 5;

recognition.onresult = function(event) {
  resultsDisplay.innerHTML = "You Said:" + event.results[0][0].transcript;
};

function start() {
  recognition.start();
  startButton.style.display = "none";
  stopButton.style.display = "block";
}

function stop() {
  recognition.stop();
  startButton.style.display = "block";
  stopButton.style.display = "none";
}

在1754像素屏幕宽度＆＃34;描述MKT＆＃34;不包裹。但是在宽度为1697px时，＆＃34;描述＆＃34;之间存在换行符。和＆＃34; MKT＆＃34;。我可以制作col-lg-2和col-lg-10的列，这些列看起来很好，并且＃34;较大的＃34;比例分辨率，但在1700+屏幕像素宽度时，第一列太宽。

是否有一种简单的方法可以在引导程序中布置列，这样您就不会获得太多的空格？理想情况下，我需要在列上使用最大宽度而不破坏引导程序。

Answer 1

在第一个上使用col-auto，在第二个上使用col。

这应该使第一列只占用所需的宽度，第二列占据行的其余部分。

示例：的

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-auto bg-danger">Description MKT</div>
    <div class="col bg-success">
      Some other content
    </div>
  </div>
</div>

Boostrap和最大单元宽度

1 个答案: