如何使用脉冲捕鱼机

書名： Bootstrap 4：Responsive Web Design
作者名： Silvio Moreto Matt Lambert Benjamin Jakobus Jason Marah
本章字數： 387字
更新時間： 2021-07-09 18:54:43

Cleaning up the mess

First, we will stop the line from breaking in the Ctrl + D text in the second row of our design. For fixing this issue, we will create our first line of CSS code. Add the <head> tag to a custom CSS file. Remember to place it below the bootstrap.css import line:

<link rel="stylesheet" href="css/base.css">

In the base.css file, create a helper class rule for .nowrap:

.nowrap {
    white-space: nowrap;
}

In the HTML file, add the created class to the <kbd> element (line 43):

<kbd class="nowrap"><kbd>ctrl</kbd> + <kbd>d</kbd></kbd>

Reload the page and you'll see that one problem is solved. Now, let's fix the horizontal scroll. Can you figure out what is making the unintended horizontal scroll? A tip, the problem is in the table!

Tip

What is the meaning of the white-space CSS property?

The white-space property specifies how whitespace is handled inside an element. The default is normal, where the line breaks will occur when needed. nowrap will prevent line break by creating a new line and pre will only wrap on line breaks.

The problem is caused by the buttons with the display block that make the content of each column larger than intended. To fix this, we will create our first CSS media query:

@media (max-width: 48em) {
    table .btn {
        font-size: 0.75rem;
        font-size: 3.5vw;
    }
}

Breaking down each line, first we see the current media query. The rule is that for max-width of 48em (defined in Bootstrap as small devices), apply the following rules. If the view port is greater than 48em, the rule will not be applied.

For the .btn elements inside the table element, we changed the font size (this was causing the horizontal overflow). We used a new way to set the font size based on the viewport with the 3.5vw value. Each 1vw corresponds to 1 percent of the total viewport. If we change the viewport, we will change the font size dynamically without breaking the layout.

Since it is a new property, nowadays just Chrome 20-34 and Safari 6 or higher have this rendering feature. For this reason, we added the other line with font-size: 0.75rem as a fallback case. If the browser can't handle the viewport font size, it will already had decreased the font to 12px, which is a font that does not break the layout.

官术网_书友最值得收藏!

Bootstrap 4：Responsive Web Design

Cleaning up the mess

Tip