小编Web*_*ter的帖子

我的 Angular2 应用程序中有一个 Bootstrap 模式弹出窗口。我希望它是可拖动的。如果有人可以帮助我解决此问题，那将非常有帮助。

<div class="modal modal-sm fade fade in" [class]="modalWorkPhone" id="myModal" role="dialog">
   <div class="modal-dialog"> 
   <!-- Modal content-->
     <div class="modal-content">
       <div class="panel-heading" style="background-color:#2e90bd">
       </div>
     </div>
   </div>
</div>

我正在使用 Angular (v4.3.1) 和 Bootstrap (v4.0.0-alpha.6)。模板包含两个子组件，如下所示：

<div class="card-deck">
    <comp1></comp1>
    <comp2></comp2>
</div>

两个子组件的模板都将.cardBootstrap 类作为根元素的类。

<div class="card">
    ...
</div>

这，一旦编译结果在以下 HTML

<div class="card-deck">
    <comp1 _nghost-c3="">
        <div _ngcontent-c3="" class="card">
            ...
        </div>
    </comp1>
    <comp2 _nghost-c4="">
        <div _ngcontent-c4="" class="card">
            ...
        </div>
    </comp2>
</div>

问题是.card-deck如果有一个元素包裹.card元素，样式就不会被正确应用。

仅 Bootstrap 示例，问题与 Bootstrap css 严格相关，而与 Angular 无关。

<div class="card-deck">
    <comp1></comp1>
    <comp2></comp2>
</div>

任何人都知道让组件结构和样式都工作的方法吗？

我正在尝试使用Bootstrap 4在屏幕尺寸较小(sm)时重新排序我的列.但是,它们在大屏幕尺寸上重新排序并保持在小屏幕上的原始位置.

当前代码:

    <div class="container">
                    <div class="row project-container" id="project1">
                       <div class="col-md-5 offset-md-1 order-sm-12">
                            <div class="project-description">
                                <h2>Meteor Shower</h2>
                                <span>Video Game,Unity Game Engine</span>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum 
                                Lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, numquam. dolor sit, amet consectetur adipisicing elit. Sint, quidem.voluptates aut atque obcaecati unde. Repellendus eligendi soluta tempore similique sunt?</p>
                                <div class="visit-website">Visit Website</div>
                            </div>
                       </div>
                       <div class="col-md-5 video-container order-sm-1" >
                           <div class="videoWrapper">
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/DzFfqFzir2o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> …

我当前正在使用引导程序4。我试图在卡头上对齐文本，我尝试使用，ml-auto但是它不起作用。有什么解决方案？

这是我的卡头代码：

<div class="card-header bg-info text-white">
  <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
  <a href="#" class="text-white ml-auto">Add Media</a>
</div>

我想通过 python 脚本自动替换很多无聊的 C# 代码。我读取文件的所有行，转换它们，截断整个文件，写入新字符串并关闭它。

f = open(file, 'r+')
text = f.readlines()
# some changes
f.truncate(0)
for line in text:
    f.write(line)
f.close()

我所有的修改都写下来了。但文件开头出现了一些奇怪的字符。我不知道如何避免它们。即使我打开encoding='utf-8-sig'它也没有帮助。

我尝试截断除第一行之外的整个文件，如下所示：

import sys
f.truncate(sys.getsizeof(text[0]))
for index in range(1, len(text), 1):
    f.write(text[index])

但在这种情况下，不止第一行正在写入，而不仅仅是第一行。

编辑 我尝试过这个：

f.truncate(len(text[0]))
for index in range(1, len(text), 1):
    f.write(text[index])

第一行写的是正确的，但下一行有同样的问题。所以我认为这些字符来自文件末尾，我尝试在它们后面写入。

我在网页上展示了一个选项卡菜单。然而，当调整大小时，我遇到了意想不到的行为，因此我的目标是当设备基本上是手机 @media(min-width:768px) 时删除文本并仅保留 fa 图标。

菜单如下：

<div>
          <div class="d-flex flex-row text-white align-items-stretch text-center">
            <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
              <i class="fa fa-home d-block"></i> Home
            </div>
            <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
              <i class="fa fa-graduation-cap d-block"></i> Resume
            </div>
            <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#portfolio">
              <i class="fa fa-folder-open d-block"></i> Portfolio
            </div>
            <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
              <i class="fa fa-envelope d-block"></i> Contact
            </div>
          </div>
        </div>

当设备为 @media@media(min-width:768px) 时，我想删除这些名称“主页”、“联系人”、“简历”、“作品集”。

这就是我的 @media 查询当前的样子：

   @media (max-width: 768px) {
  #main-header .port-item {
    width: 25%;
  }

  #main-header …

我需要将我的导航栏链接更改为白色，并将它们在导航栏上隔开。我已经为此编写了代码，但我似乎无法弄清楚它为什么/在哪里不断被覆盖。导航栏的背景是一个图像，链接似乎在没有图像的情况下变为白色，那么有没有办法解决这个问题并将图像保留在背景中？

谁能帮我理解我做错了什么？

.navbar {
  background-image: url("images/navbarbgnew.png");
  background-size: cover;
  margin: -30px 0 15px 0;
}

.navbar ul {
  display: flex;
  justify-content: space-around;
}

.navbar ul li a {
  color: #FFF;
  font-family: "Helvetica," sans-serif;
  font-weight: 600;
  font-size: 14px;
}

<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          BOOKS
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Branding Sutra</a> …

我知道这个话题已经被打死了，但是我读的没有用。我只是想将我的引导导航栏中的链接更改为白色。我知道上面有CSS，因为我可以更改字体大小，但不能更改颜色。

nav .navbar-nav li{
  color: white !important;
  font-size: 25px;
  }

<nav class="navbar navbar-expand-lg navbar-light fixed-top sticky-top">
  <%= link_to root_path, class: 'navbar-brand' do %>
            <span class="fa fa-home" aria-hidden="true"> Bartlett Containers LLC</span>  <% end %>


  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
      <li class="nav-item">
        <%=link_to 'Pricing', pricing_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'FAQ', faq_path, class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%=link_to 'Contact', contact_path, class: 'nav-link' %> 
      </li>

    </ul>
  </div> …

我在 5.5 版中使用 Laravel 启动了一个项目，包括 Bootstrap v.3.3.7。现在，我想测试是否可以切换到新的 4.0 版本。

我已经读过这篇文章，但我不确定我项目中编写的所有代码是否都适用于新版本，而且我正在使用 Laravel 中包含的 bootstrap-sass。

我是否只需要运行：

npm uninstall bootstrap
npm install bootstrap

要包含新版本的 sass 预处理器，否则我的代码会被完全破坏吗？

我愿意接受任何建议，因为我不知道这是否可行。

是否可以在多选选择器中将选定文本格式“静态”与选定文本格式“计数”一起使用？

这是我当前的选择器：

<select id=“postcodeSelect" class="selectpicker" title="Postcode" data-size="5" data-live-search="true" multiple data-selected-text-format="static">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

现在无论选择什么，它总是显示“邮政编码”，但如果选择了 3 个邮政编码，我希望它显示“邮政编码（选择 3 个项目）”。