引导程序布局：获得两个滚动条

时间：2018-12-05 12:56:44

标签： html css twitter-bootstrap bootstrap-4

下面是我的待办事项应用程序的html代码，我的问题是我有两个滚动条，有人可以为我建议正确的应用程序引导程序布局吗？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-md-12">
                <input class="form-control" placeholder="Name" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown',hasFocus: isNameSelected">
                <textarea class="form-control" placeholder="Detail" style="resize:none" data-bind="value:Detail,hasFocus: isDetailSelected"></textarea>
                <button type="button" class="btn btn-primary" data-bind="click: createOrUpdateTodo,text:createBtnText">Create</button>
                <button type="button" class="btn btn-primary" data-bind="click: cancel">Cancel</button>
            </div>
        </div>
    </div>
    <div class="col-md-12" style="padding:20px">
        <div class="row" data-bind="foreach: todoList">
            <div class="col-md-3">
                <div class="todo-box">
                    <input type="hidden" data-bind="value:TodoId" value="40">
                    <label data-bind="html: Name" class="todo-name">From today's featured article</label>
                    <i class="fa fa-window-close pull-right" data-bind="click: removeTodo" title="Delete Todo"></i>
                    <i class="fa fa-check-circle pull-right" data-bind="click: archiveTodo" title="Archive"></i>
                    <i class="fa fa-edit pull-right" data-bind="click: edit" title="Edit"></i>
                    <h6 data-bind="text: CreatedOnStr()" class="todo-createdon">12/4/2018 4:51:21 PM</h6>
                    <div class="editable" data-bind="text: Detail">The Kalakaua coinage is a set of silver coins of the Kingdom of Hawaii dated 1883. They were designed by Charles E. Barber, Chief Engraver of the United States Bureau of the Mint, and were struck at the San Francisco Mint. The issued coins are a dime, quarter dollar, half dollar, and dollar (pictured). No immediate action had been taken after the 1880 act authorizing the coins, but King Kalakaua was interested, and government officials saw a way to get out of a financial bind by getting coins issued in exchange for government bonds. The coins entered circulation in early 1884. After legal maneuvering by the business community in Honolulu, who feared inflation of the currency in a time of recession, the government agreed to use over half of the coinage as backing for paper currency. The coins were more eagerly accepted after the economy picked up in 1885. In 1903, after Hawaii became a territory, Congress called in the coins, replacing them with US currency. </div>
                </div>
            </div>
        </div>
    </div>
</div>

4 个答案:

答案 0 :(得分：1)

如果要扩展布局，则应将父div添加为“ container”或“ container-fluid”类。 

<div class="container-fluid">
  <div class="row">
    <!-- Your content !-->
  </div>
</div>

答案 1 :(得分：1)

只需将代码放入容器div 

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="col-md-12">
                    <input class="form-control" placeholder="Name" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown',hasFocus: isNameSelected">
                    <textarea class="form-control" placeholder="Detail" style="resize:none" data-bind="value:Detail,hasFocus: isDetailSelected"></textarea>
                    <button type="button" class="btn btn-primary" data-bind="click: createOrUpdateTodo,text:createBtnText">Create</button>
                    <button type="button" class="btn btn-primary" data-bind="click: cancel">Cancel</button>
                </div>
            </div>
        </div>
        <div class="col-md-12" style="padding:20px">
            <div class="row" data-bind="foreach: todoList">
                <div class="col-md-3">
                    <div class="todo-box">
                        <input type="hidden" data-bind="value:TodoId" value="40">
                        <label data-bind="html: Name" class="todo-name">From today's featured article</label>
                        <i class="fa fa-window-close pull-right" data-bind="click: removeTodo" title="Delete Todo"></i>
                        <i class="fa fa-check-circle pull-right" data-bind="click: archiveTodo" title="Archive"></i>
                        <i class="fa fa-edit pull-right" data-bind="click: edit" title="Edit"></i>
                        <h6 data-bind="text: CreatedOnStr()" class="todo-createdon">12/4/2018 4:51:21 PM</h6>
                        <div class="editable" data-bind="text: Detail">The Kalakaua coinage is a set of silver coins of the Kingdom of Hawaii dated 1883. They were designed by Charles E. Barber, Chief Engraver of the United States Bureau of the Mint, and were struck at the San Francisco Mint. The issued coins are a dime, quarter dollar, half dollar, and dollar (pictured). No immediate action had been taken after the 1880 act authorizing the coins, but King Kalakaua was interested, and government officials saw a way to get out of a financial bind by getting coins issued in exchange for government bonds. The coins entered circulation in early 1884. After legal maneuvering by the business community in Honolulu, who feared inflation of the currency in a time of recession, the government agreed to use over half of the coinage as backing for paper currency. The coins were more eagerly accepted after the economy picked up in 1885. In 1903, after Hawaii became a territory, Congress called in the coins, replacing them with US currency. </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

答案 2 :(得分：1)

由于从console.log(test)开始，所以X轴上出现滚动条。引导程序中的行类在div的左侧和右侧添加负数row，从而导致底部滚动条出现。将行包装在margin或container div中，否则将container-fluid类添加到该行

答案 3 :(得分：0)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<body style="overflow-x:hidden;">
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-md-12">
                <input class="form-control" placeholder="Name" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown',hasFocus: isNameSelected">
                <textarea class="form-control" placeholder="Detail" style="resize:none" data-bind="value:Detail,hasFocus: isDetailSelected"></textarea>
                <button type="button" class="btn btn-primary" data-bind="click: createOrUpdateTodo,text:createBtnText">Create</button>
                <button type="button" class="btn btn-primary" data-bind="click: cancel">Cancel</button>
            </div>
        </div>
    </div>
    <div class="col-md-12" style="padding:20px">
        <div class="row" data-bind="foreach: todoList">
            <div class="col-md-3">
                <div class="todo-box">
                    <input type="hidden" data-bind="value:TodoId" value="40">
                    <label data-bind="html: Name" class="todo-name">From today's featured article</label>
                    <i class="fa fa-window-close pull-right" data-bind="click: removeTodo" title="Delete Todo"></i>
                    <i class="fa fa-check-circle pull-right" data-bind="click: archiveTodo" title="Archive"></i>
                    <i class="fa fa-edit pull-right" data-bind="click: edit" title="Edit"></i>
                    <h6 data-bind="text: CreatedOnStr()" class="todo-createdon">12/4/2018 4:51:21 PM</h6>
                    <div class="editable" data-bind="text: Detail">The Kalakaua coinage is a set of silver coins of the Kingdom of Hawaii dated 1883. They were designed by Charles E. Barber, Chief Engraver of the United States Bureau of the Mint, and were struck at the San Francisco Mint. The issued coins are a dime, quarter dollar, half dollar, and dollar (pictured). No immediate action had been taken after the 1880 act authorizing the coins, but King Kalakaua was interested, and government officials saw a way to get out of a financial bind by getting coins issued in exchange for government bonds. The coins entered circulation in early 1884. After legal maneuvering by the business community in Honolulu, who feared inflation of the currency in a time of recession, the government agreed to use over half of the coinage as backing for paper currency. The coins were more eagerly accepted after the economy picked up in 1885. In 1903, after Hawaii became a territory, Congress called in the coins, replacing them with US currency. </div>
                </div>
            </div>
        </div>
    </div>
</div>

相关问题
最新问题